Badges & Tags
Les badges et tags permettent d'afficher des etats, des categories ou des filtres interactifs.
BcBadge
Variantes
DefaultBlueGreenYellowRedDarkAccent
vue
<BcBadge label="Default" variant="default" />
<BcBadge label="Blue" variant="blue" />
<BcBadge label="Green" variant="green" />
<BcBadge label="Yellow" variant="yellow" />
<BcBadge label="Red" variant="red" />
<BcBadge label="Dark" variant="dark" />
<BcBadge label="Accent" variant="accent" />Tailles
SmallMedium
Pill & Dot
Pill badgeWith dotDot pill
vue
<BcBadge label="Pill badge" pill variant="green" />
<BcBadge label="With dot" dot variant="red" />Live badge (role="status")
Utiliser live pour les badges dont le contenu change dynamiquement (compteurs, notifications).
3 newStatic
vue
<!-- Badge dynamique : role="status" pour les lecteurs d'ecran -->
<BcBadge label="3 new" variant="red" live dot />
<!-- Badge statique : pas de role -->
<BcBadge label="Static" variant="blue" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Badge" | Texte du badge |
variant | "default" | "blue" | "green" | "yellow" | "red" | "dark" | "accent" | "default" | Variante couleur |
size | "sm" | "md" | "md" | Taille |
pill | boolean | false | Coins arrondis en pill |
dot | boolean | false | Affiche un point colore |
live | boolean | false | Ajoute role="status" pour les badges dynamiques |
BcTag
Variantes
DefaultBrandGreenYellowRedBlue
vue
<BcTag label="Default" tone="default" />
<BcTag label="Brand" tone="brand" />
<BcTag label="Green" tone="green" />Removable
Removable
vue
<BcTag label="Removable" tone="brand" removable @remove="onRemove" />
<BcTag label="Click me" tone="blue" clickable @click="onClick" />Tailles
SmallMedium
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Tag" | Texte du tag |
tone | "default" | "brand" | "green" | "yellow" | "red" | "blue" | "default" | Couleur |
size | "sm" | "md" | "md" | Taille |
removable | boolean | false | Affiche le bouton de suppression |
clickable | boolean | false | Rend le tag cliquable |
Events
| Event | Payload | Description |
|---|---|---|
click | — | Emis au clic (si clickable) |
remove | — | Emis au clic sur le bouton de suppression |
BcFilterChip
Chip interactif pour les filtres. Supporte v-model pour l'etat actif/inactif.
vue
<script setup>
import { ref } from 'vue'
const chipA = ref(true)
const chipB = ref(false)
const chipC = ref(false)
</script>
<BcFilterChip v-model="chipA" label="Actifs" :count="12" />
<BcFilterChip v-model="chipB" label="En attente" :count="5" />
<BcFilterChip v-model="chipC" label="Archives" :count="42" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Etat actif/inactif (v-model) |
label | string | — | Texte du chip |
icon | string | "" | Icone optionnelle |
count | number | — | Compteur optionnel |
disabled | boolean | false | Desactive le chip |
BcKvTag
Tag cle-valeur, ideal pour afficher des metadonnees techniques.
ENVproductionVERSION3.2.1STATUSactiveERRORS2
vue
<BcKvTag k="ENV" v="production" />
<BcKvTag k="VERSION" v="3.2.1" tone="brand" />
<BcKvTag k="STATUS" v="active" tone="green" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
k | string | — | Cle (partie gauche) |
v | string | number | — | Valeur (partie droite) |
tone | "default" | "brand" | "green" | "yellow" | "red" | "blue" | "default" | Couleur |
mono | boolean | true | Police monospace |
clickable | boolean | false | Rend le tag cliquable |