Alertes & Callouts
Composants de retour utilisateur : alertes contextuelles, encadres editoriaux et citations.
BcAlert
Variantes
Information
Succes
Attention
Erreur
vue
<BcAlert variant="info" title="Information" message="Votre session expire dans 10 minutes." />
<BcAlert variant="success" title="Succes" message="Le document a ete enregistre." />
<BcAlert variant="warn" title="Attention" message="Ce champ sera bientot obsolete." />
<BcAlert variant="danger" title="Erreur" message="Impossible de charger les donnees." />Dismissible
Notification
vue
<BcAlert v-model="show" variant="info" title="Notification"
message="Cliquez sur × pour fermer cette alerte." dismissible />Avec contenu personnalise
Mise a jour requise Votre version est obsolete. Mettre a jour maintenant.
vue
<BcAlert variant="warn" title="Mise a jour requise">
Votre version est obsolete. <a href="#">Mettre a jour maintenant</a>.
</BcAlert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | true | Visibilite (v-model) |
variant | "info" | "success" | "warn" | "danger" | "info" | Variante visuelle |
title | string | "Information" | Titre de l'alerte |
message | string | "" | Message principal |
dismissible | boolean | false | Bouton de fermeture |
icon | string | — | Icone personnalisee |
Evenements
| Evenement | Payload | Description |
|---|---|---|
update:modelValue | boolean | Changement de visibilite |
close | — | Fermeture de l'alerte |
BcCallout
Encadre decoratif pour mettre en avant une information editoriale. Contrairement a BcAlert, il n'est pas dismissible et sert a enrichir le contenu.
Variantes
Le saviez-vous ?
Les tokens CSS permettent de personnaliser l'ensemble du design system. Astuce
Utilisez la prop mono sur BcInput pour afficher du code. Deprecation
Ce composant sera retire dans la version 4.0. Interdit
Ne jamais stocker de mots de passe en clair. vue
<BcCallout variant="info" title="Le saviez-vous ?">
Les tokens CSS permettent de personnaliser l'ensemble du design system.
</BcCallout>
<BcCallout variant="tip" title="Astuce">
Utilisez la prop <code>mono</code> sur BcInput pour afficher du code.
</BcCallout>
<BcCallout variant="warn" title="Deprecation">
Ce composant sera retire dans la version 4.0.
</BcCallout>
<BcCallout variant="danger" title="Interdit">
Ne jamais stocker de mots de passe en clair.
</BcCallout>Avec icone personnalisee
Performance
Le lazy-loading reduit le temps de chargement de 40%. vue
<BcCallout variant="tip" title="Performance" iconClass="ph-lightning">
Le lazy-loading reduit le temps de chargement de 40%.
</BcCallout>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "tip" | "warn" | "danger" | "info" | Variante visuelle |
title | string | "" | Titre du callout |
icon | string | — | Emoji ou caractere personnalise |
iconClass | string | — | Classe CSS pour icone (ex: Phosphor) |
Blockquote en contexte
BcBlockquote peut être utilisé dans les callouts éditoriaux ou la documentation textuelle. La page canonique (API + variantes) est ici :