Boutons
Le composant BcButton est le bouton principal du Design System. Il supporte 6 variantes, 3 tailles, les icones, le loading et le mode icon-only.
Variantes
vue
<BcButton label="Primary" variant="primary" />
<BcButton label="Secondary" variant="secondary" />
<BcButton label="Tertiary" variant="tertiary" />
<BcButton label="Outline" variant="outline" />
<BcButton label="Ghost" variant="ghost" />
<BcButton label="Danger" variant="danger" />Tailles
vue
<BcButton label="Small" size="sm" />
<BcButton label="Medium" size="md" />
<BcButton label="Large" size="lg" />Etats
Disabled
Loading
vue
<BcButton label="Loading..." variant="primary" loading />
<BcButton :label="loading ? 'Chargement...' : 'Cliquer'"
variant="outline" :loading="loading" @click="simulateLoad" />Avec fleche
vue
<BcButton label="Continuer" variant="primary" arrow />Block (pleine largeur)
vue
<BcButton label="Valider le formulaire" variant="primary" block />Icon-only
Le mode iconOnly necessite une ariaLabel pour l'accessibilite.
vue
<BcButton icon-only aria-label="Parametres" variant="secondary" size="sm">
<template #icon><i class="bi bi-gear" /></template>
</BcButton>
<BcButton icon-only aria-label="Fermer" variant="ghost">
<template #icon><i class="bi bi-x" /></template>
</BcButton>
<BcButton icon-only aria-label="Supprimer" variant="danger" size="lg">
<template #icon><i class="bi bi-trash" /></template>
</BcButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Button" | Texte du bouton |
variant | "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "primary" | Variante visuelle |
size | "sm" | "md" | "lg" | "md" | Taille |
type | "button" | "submit" | "reset" | "button" | Type HTML |
disabled | boolean | false | Desactive le bouton |
loading | boolean | false | Affiche un spinner et desactive le bouton |
block | boolean | false | Pleine largeur |
icon | string | "" | Icone textuelle |
iconPosition | "left" | "right" | "right" | Position de l'icone |
arrow | boolean | false | Affiche une fleche animee |
iconOnly | boolean | false | Mode icone seule (masque le label) |
ariaLabel | string | — | Label ARIA (requis si iconOnly) |
Slots
| Slot | Description |
|---|---|
default | Contenu du bouton (remplace label) |
icon | Icone personnalisee |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Emis au clic (pas emis si disabled/loading) |
Guide d'usage
| Contexte | Variante recommandee |
|---|---|
| Action principale (CTA) | primary |
| Action secondaire | secondary ou tertiary |
| Action avec emphase | outline |
| Action discrete | ghost |
| Action destructive | danger |