Aller au contenu principal

Blueprint Components

104 composants bpm.*

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 & Status

bpm.message success

bpm.message warning

bpm.message error

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

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

bpm.textarea

bpm.numberInput

bpm.selectbox

bpm.checkbox

bpm.toggle

bpm.radioGroup

Priorité

bpm.slider

50

bpm.dateInput

JJ/MM/AAAA

bpm.colorPicker

#048dc3

bpm.autocomplete

bpm.filterPanel

bpm.promptInput

~0 tokens

bpm.dateRangePicker

JJ/MM/AAAA
–
JJ/MM/AAAA

bpm.timeInput

--:--

Layout & 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

CA
142 500 €
 
Commandes
1 284
 
Clients
342
 

bpm.column

Colonne flex.

bpm.divider

bpm.expander

bpm.accordion

Réponse 1.
Réponse 2.

bpm.theme

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

Email
user@example.com
StatutActif

Données & Visualisation

bpm.metric + delta

Chiffre d'affaires
142 500 €
▲+12%

bpm.metricRow

CA
142 500 €
 
Marge
28%
 
Clients
342
 

bpm.table

NomStatutValeur
AliceActif12 000 €
BobInactif8 500 €
CarolActif21 300 €

bpm.plotlyChart

bpm.timeline

Aujourd'hui
Déploiement
à l'instant
Alice
Mise en production
Revue code
il y a 1 h
Bob
6 avril 2026
Merge feature
il y a 2 j
branche
feat/timeline
5 avril 2026
Ticket ouvert
il y a 3 j
3 avril 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érenceLibellé
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

Composants
Opération réussie
Exemple de notification toast avec header (icône, intitulé), titre et descriptif.

bpm.notificationCenter

Notifications

2
  • 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.

    6 avr.

bpm.fab

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

Médias & Utilitaires

bpm.avatar

JD✎

bpm.avatar sidebar

JD

Jean Dupont

jean@example.com

bpm.video

bpm.audio

bpm.image

Image exemple

bpm.qrCode

bpm.rating

bpm.fileUploader

bpm.map

bpm.barcode

3760123456789

bpm.nfcBadge

NFC actif

bpm.pdfViewer

bpm.filePreview

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

SoumettreOKNOKBrouillonRevueValidéRefus

bpm.statusTracker

Créé
il y a 4 j
En analyse
il y a 2 j
Validation
à l'instant
Clôturé

bpm.statusTracker (vertical)

  1. Ouvert
    il y a 1 h
  2. TraitementEn cours
    Niveau 2
  3. 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

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

AliceActif1 200
BobInactif800

bpm.chatInterface

Bonjour
23:40
U
IA
Bonjour, comment puis-je vous aider ?
23:40

bpm.jsonEditor

JSON valide

bpm.offlineIndicator

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

bpm.assistantPanel

bpm.crudPage

Exemple CRUD