Galerie de composants

101 composants bpm.* en rendu réel

Typographie

bpm.title level 1

Titre niveau 1

bpm.title level 2

Titre niveau 2

bpm.title level 3

Titre niveau 3

bpm.text

Texte courant — corps de page standard.

bpm.caption

Caption — texte secondaire, 0.75rem.

bpm.markdown

Gras, italique, code inline, lien.

bpm.html

Contenu HTML rendu (à utiliser avec contenu de confiance ou sanitized).

bpm.button

Variants

Sizes

Icons

Toolbar (ghost raised)

Strip nav

Pleine largeur

Disabled / Loading

COMPOSITIONS — action cluster

COMPOSITIONS — danger confirm

COMPOSITIONS — segmented (Jour / Semaine / Mois)

COMPOSITIONS — toolbar text

COMPOSITIONS — toolbar data

COMPOSITIONS — strip nav

COMPOSITIONS — strip social

Feedback & statuts

bpm.message success

Opération réussie.

bpm.message warning

Attention, vérifiez les données.

bpm.message error

Une erreur est survenue.

bpm.badge success

Actif

bpm.badge warning

En attente

bpm.badge default

Inactif

bpm.chip

Étiquette

bpm.statusBox

✓Connecté

bpm.progress

Progression65 %

bpm.loadingBar

bpm.spinner

Chargement...

bpm.skeleton

bpm.skeleton lines

bpm.spinnerDot

bpm.transition

Vue 1 — Contenu alterné.

bpm.highlightBox

1INFO

Information mise en évidence.

bpm.emptyState

Aucune donnée

Commencez par créer un élément.

Saisie

bpm.input

Nom

bpm.textarea

Description

bpm.numberInput

Quantité

bpm.selectbox

Statut

bpm.checkbox

J'accepte les conditions

bpm.toggle

Notifications

bpm.radioGroup

Priorité

HauteMoyenneBasse

bpm.slider

Volume

bpm.dateInput

Date de livraison

JJ/MM/AAAA

bpm.colorPicker

Couleur

#048dc3

bpm.autocomplete

Recherche

bpm.filterPanel

Statut

Recherche

bpm.promptInput

~0 tokens

bpm.dateRangePicker

Période

JJ/MM/AAAA

–

JJ/MM/AAAA

bpm.timeInput

Heure de début

--:--

Mise en page & conteneurs

bpm.panel

iPanneau standard

Contenu du panneau.

bpm.card

Contenu de la carte.

bpm.container

Contenu dans un conteneur centré.

bpm.grid + bpm.metric

142 500 €

Commandes

1 284

Clients

342

bpm.column

Colonne flex.

bpm.divider

bpm.expander

bpm.accordion

Question 1

Réponse 1.

Question 2

Réponse 2.

bpm.theme

Thème clair / sombre

bpm.empty

Conteneur vide (bpm.empty) — espace réservé ou zone minimale.

bpm.pageLayout

Contenu principal.

bpm.scrollContainer

Ligne de contenu 1

Ligne de contenu 2

Ligne de contenu 3

Ligne de contenu 4

Ligne de contenu 5

Ligne de contenu 6

Ligne de contenu 7

Ligne de contenu 8

bpm.labelValue

user@example.com

StatutActif

Données & visualisation

bpm.metric + delta

Chiffre d'affaires

142 500 €

▲+12%

bpm.metricRow

142 500 €

Marge

28%

Clients

342

bpm.table

Nom	Statut	Valeur
Alice	Actif	12 000 €
Bob	Inactif	8 500 €
Carol	Actif	21 300 €

bpm.plotlyChart

bpm.timeline

Aujourd'hui

Déploiement

à l'instant

Alice

Mise en production

Revue code

il y a 1 h

Bob

9 juin 2026

Merge feature

il y a 2 j

branche: feat/timeline

8 juin 2026

Ticket ouvert

il y a 3 j

6 juin 2026

Spec validée

il y a 5 j

bpm.streamingText

Texte affiché progressivement. Markdown pris en charge.

bpm.jsonViewer

"id":1

"name":"Blueprint"

"version":"0.1.60"

"active":true

bpm.codeBlock

const x = bpm.metric('CA', '142 500 €')

bpm.stepper

bpm.pagination

bpm.treeview

Dossier A

Fichier 1

Fichier 2

Dossier B

bpm.table (état vide)

Référence	Libellé
Aucune commande pour cette période.

bpm.lineChart

bpm.barChart

bpm.areaChart

bpm.scatterChart

bpm.altairChart

Graphique Altair / Vega-Lite. Passez spec (JSON) ou iframeSrc après avoir intégré vega-embed dans votre app.

Overlays & interactions

bpm.button + bpm.modal

bpm.button + bpm.drawer

bpm.tooltip

bpm.popover

bpm.confirmModal

bpm.toast

Exemple de notification toast avec header (icône, intitulé), titre et descriptif.

bpm.notificationCenter

Notifications

Mise à jourNon lu
Nouvelle version disponible.
à l'instant
Export prêtNon lu
Votre fichier est prêt.
il y a 1 h
Lues
Attention
Quota bientôt atteint.
hier
Échec sync
Réessayez plus tard.
9 juin

bpm.fab

bpm.fab — bouton flottant, se positionne en bas à droite de son conteneur parent

Médias & utilitaires

bpm.avatar

JD✎

bpm.avatar sidebar

bpm.video

bpm.audio

bpm.image

bpm.qrCode

bpm.rating

bpm.fileUploader

bpm.map

bpm.barcode

3760123456789

bpm.nfcBadge

NFC actif

bpm.pdfViewer

bpm.filePreview

Télécharger

bpm.gps

bpm.gps — affichage position

Position actuelle

bpm.gps — sélection d'un point

Sélectionner un point

Systèmes métier

bpm.flowDiagram

bpm.statusTracker

Créé

il y a 4 j

En analyse

il y a 2 j

Validation

à l'instant

Clôturé

bpm.statusTracker (vertical)

Ouvert
il y a 1 h
TraitementEn cours
Niveau 2
Résolu

bpm.activityFeed

Alice a créé le devis DV-2024-001 · à l'instant
Bob a modifié le devis DV-2024-002 · il y a 2 min
Carol a validé le devis DV-2024-003 · il y a 4 min
Alice a créé le devis DV-2024-004 · il y a 6 min
Bob a modifié le devis DV-2024-005 · il y a 8 min
Carol a validé le devis DV-2024-006 · il y a 10 min
Alice a créé le devis DV-2024-007 · il y a 12 min
Bob a modifié le devis DV-2024-008 · il y a 14 min
Carol a validé le devis DV-2024-009 · il y a 16 min
Alice a créé le devis DV-2024-010 · il y a 18 min

bpm.orgChart

bpm.masterDetail

Détail — Item 1

Statut : Actif

bpm.wizardForm

Étape 1 sur 4

Nom

bpm.commandPalette

Spécialisés

bpm.diffViewer

1
 
function old() {\n  return 1;\n}

1
function new() {\n  return 2;\n}
 

bpm.modelSelector

bpm.dataExplorer


Alice	Actif	1 200
Bob	Inactif	800

bpm.chatInterface

Bonjour

19:51

Bonjour, comment puis-je vous aider ?

19:51

bpm.jsonEditor

JSON valide

bpm.offlineIndicator

🔄0 entrée en attente (démo)

bpm.assistantPanel

bpm.crudPage

Exemple CRUD

Chargement...

Élévation — jugement & états

Chaque composant élevé est montré en trois états : défaut (rendu historique inchangé), déviant (un context est fourni → le composant révèle son jugement) et trajectoire (une série v(t) expose niveau + tendance). 26 composant(s) traité(s).

Instruments — portent un jugement (interpret) (23)

bpm.metric

INSTRUMENT

défaut — appel historique, rendu inchangé

Chiffre d'affaires

125 000

▲+12%

déviant — context { reference: 150000, higher_is_better } → écart défavorable révélé

Chiffre d'affaires

125 000

▼ −25000 vs repère

trajectoire — value = v(t) → dernier point + tendance ↘ + sparkline

Taux de service (%)

▼ −19 vs repère · tendance ↘ · anomalie

bpm.progressRing

INSTRUMENT

défaut — rendu historique inchangé

déviant — context { reference: 90, higher_is_better } → anneau rouge (écart défavorable)

trajectoire — v(t) descendante → flèche de tendance ↘ au centre

bpm.progress

INSTRUMENT

défaut — rendu historique inchangé

TRS74 %

déviant — context { reference: 0.8, higher_is_better } → barre rouge + écart révélé

TRS62 %

▼ −0.18 vs repère

trajectoire — v(t) en amélioration → barre verte, tendance ↗

TRS86 %

▲ +0.06 vs repère · tendance ↗

bpm.liveGauge

INSTRUMENT

défaut — rendu historique inchangé (zones seuil)

CPU %62

déviant — context { reference: 60, lower_is_better } → valeur jugée défavorable

Latence (ms)85▼ −25 vs repère

trajectoire — v(t) montante & lower_is_better → tendance ↘ (worsening) révélée

Latence (ms)72 ↘▼ −12 vs repère · tendance ↘

bpm.sparkline

INSTRUMENT

défaut — rendu historique inchangé (couleur pilotée par trend)

déviant — context → couleur jugée + ligne de repère pointillée

trajectoire — points v(t) explicites (t non régulier) → tendance jugée

bpm.statusBox

INSTRUMENT

défaut — rendu historique inchangé

✓Synchronisation CRM

déviant — value + context → verdict écart révélé, bordure jugée

Chargement...

File d'attente▼ −140 vs repère

trajectoire — v(t) en baisse & lower_is_better → tendance ↗ (improving)

Chargement...

File d'attente▲ +20 vs repère · tendance ↗

bpm.labelValue

INSTRUMENT

défaut — rendu historique inchangé

Référence

REF-001

déviant — valeur numérique + context → couleur jugée + suffixe ▼

Stock12▼

trajectoire — trajectory v(t) → tendance jugée en suffixe

Stock12▼ ↘

bpm.anomalyAlert

INSTRUMENT

défaut — rendu historique inchangé (severity manuelle)

Anomalie détectée

Attendu : 100 kg·Mesuré : 85 kg

déviant — context → gravité auto-dérivée de interpret().severity + verdict

Anomalie détectée

Attendu : 100·Mesuré : 55

▼ −45 vs repère · anomalie · sévérité 48 %

trajectoire — history v(t) → tendance dans le verdict

Anomalie détectée

Attendu : 100·Mesuré : 55

▼ −45 vs repère · tendance ↘ · sévérité 48 %

bpm.machineStatus

INSTRUMENT

défaut — rendu historique inchangé (LED animée)

Machine A

En production

Lot #1234

déviant — value (cadence) + context → verdict + bordure jugée

Machine A

En production

▼ −18 vs repère

trajectoire — v(t) en chute → tendance ↘ révélée alors que la LED est verte

Machine A

En production

▼ −18 vs repère · tendance ↘

bpm.lineChart

INSTRUMENT

défaut — rendu historique inchangé

déviant + trajectoire — context → repère pointillé, série jugée (sous le repère et en baisse → rouge)

bpm.areaChart

INSTRUMENT

défaut — rendu historique inchangé

déviant + trajectoire — context lower_is_better, série montante → aire rouge + repère

bpm.barChart

INSTRUMENT

défaut — rendu historique inchangé

déviant + trajectoire — context → chaque barre jugée individuellement (vert/rouge) + repère pointillé

bpm.scatterChart

INSTRUMENT

défaut — rendu historique inchangé

déviant + anomalie — context → points jugés individuellement, outlier >2σ cerclé, repère pointillé

bpm.liveChart

INSTRUMENT

défaut — rendu historique inchangé (seuils manuels)

déviant + trajectoire — context → fenêtre jugée : courbe rouge, repère pointillé, verdict sous le graphique

▼ −30 vs repère · tendance ↘

bpm.rating

INSTRUMENT

défaut — rendu historique inchangé

déviant — cible 4.0 → étoiles rouges + écart révélé

▼ 2.0 vs cible

trajectoire — history v(t) en baisse → tendance ↘

▼ 2.0 vs cible ↘

bpm.sensorGrid

INSTRUMENT

défaut — rendu historique inchangé (statuts catégoriels)

Température

24.5°C

Pression

2.1bar

warning

déviant + trajectoire — context par capteur → carte jugée (bordure + verdict), tendance via history

Température

31.2°C

▼ −6.2 vs repère · tendance ↘

Débit

118L/min

▲ +18 vs repère

bpm.predictiveChart

INSTRUMENT

défaut — rendu historique inchangé

déviant + trajectoire — context → la prévision (qui décroche sous le repère) devient rouge, repère tracé

bpm.comparison

INSTRUMENT

défaut — rendu historique inchangé (highlightBest)

#	prix	delai
1	100	12
2	80	18

déviant — contexts par dimension → cellules jugées vs repère (prix cible 90 lower_is_better, délai cible 15 lower_is_better)

#	prix	delai
1	100	12
2	80	18

bpm.heatmap

INSTRUMENT

défaut — rendu historique inchangé (dégradé seul)

	A	B
X
Y

déviant + anomalie — context → cellules sous le repère liserées en rouge, outlier >2σ souligné

	L1	L2	L3
M1
M2

bpm.waterfall

INSTRUMENT

défaut — rendu historique inchangé

déviant — cumul final 120 vs repère 150 → verdict défavorable sous la cascade

▼ −30 vs repère

bpm.funnelChart

INSTRUMENT

défaut — entonnoir de conversion — jugement agrégé retiré (pas de verdict unique « vs repère »)

Visiteurs1000 (80.6%)

Leads200 (16.1%)

Clients40 (3.2%)

horizontal — orientation horizontale — même rendu, aucun jugement

Visiteurs

1000

80.6%

Leads

200

16.1%

Clients

3.2%

bpm.treemap

INSTRUMENT

défaut — rendu historique inchangé

déviant — context (part cible 35) → tuiles sous/au-dessus du repère contourées

bpm.radarChart

INSTRUMENT

défaut — rendu historique inchangé

repère par axe — anneau de repère 75 pointillé conservé (lecture par axe) — pas de couleur de verdict agrégée sur le polygone

Data — tables, listes, flux (1)

bpm.table

DATA

défaut — rendu historique inchangé

Nom	CA
Agence Nord	120
Agence Sud	85

déviant (hook d'interprétation par colonne) — column.context → cellules CA jugées vs objectif 100

Nom	CA
Agence Nord	120
Agence Sud	85

états — loading (squelettes) / error (role=alert) / empty

A	B

A
Impossible de charger les données

A
Aucune donnée disponible

Structural — layout, conteneurs (2)

bpm.highlightBox

STRUCTURAL

défaut — bloc éditorial — pas de jugement (déclassé STRUCTURAL)

1DAILY

Objectif quotidien

RTB : Point 1 · Point 2

cible — sections RTB / Cible, barre latérale colorée (barColor) — purement présentationnel

2KPI

Taux de conversion

RTB : Trafic en hausse · Tunnel raccourci

Cible : Cible 4,5 %

bpm.loadingBar

STRUCTURAL

déterminé — barre iso déterminée (value) — progressbar a11y, pas de jugement (déclassé STRUCTURAL)

indéterminé — variant sweep — chargement indéterminé, role=status

Typographie

Titre niveau 1

Titre niveau 2

Titre niveau 3

bpm.button

Feedback & statuts

Information mise en évidence.

Aucune donnée

Saisie

Mise en page & conteneurs

Données & visualisation

Navigation

Overlays & interactions

Médias & utilitaires

bpm.gps

Systèmes métier

Détail — Item 1

Spécialisés

Exemple CRUD

Élévation — jugement & états

Instruments — portent un jugement (interpret) (23)

bpm.metric

bpm.progressRing

bpm.progress

bpm.liveGauge

bpm.sparkline

bpm.statusBox

bpm.labelValue

bpm.anomalyAlert

bpm.machineStatus

bpm.lineChart

bpm.areaChart

bpm.barChart

bpm.scatterChart

bpm.liveChart

bpm.rating

bpm.sensorGrid

bpm.predictiveChart

bpm.comparison

bpm.heatmap

bpm.waterfall

bpm.funnelChart

bpm.treemap

bpm.radarChart

Data — tables, listes, flux (1)

bpm.table

Structural — layout, conteneurs (2)

bpm.highlightBox

Objectif quotidien

Taux de conversion

bpm.loadingBar