Boutons — MC Design System

Variants

Quatre variants couvrent tous les cas. Ne jamais créer de nouveau variant sans raison forte.

Variant	Classe	Quand l'utiliser
Primary	btn btn-primary	Action principale de la page. Maximum 1 par vue.
Secondary	btn btn-secondary	Action secondaire importante, alternative au primary.
Ghost	btn btn-ghost	Actions tertiaires, annulation, navigation.
Danger	btn btn-danger	Suppression, annulation irréversible uniquement.

<button class="btn btn-primary">Valider la commande</button>
<button class="btn btn-secondary">Modifier</button>
<button class="btn btn-ghost">Annuler</button>
<button class="btn btn-danger">Supprimer</button>

Tailles

Taille md (défaut) dans presque tous les cas. sm pour les actions dans les tableaux. lg uniquement dans les héros.

<button class="btn btn-primary btn-sm">Petit</button>
<button class="btn btn-primary">Moyen (défaut)</button>
<button class="btn btn-primary btn-lg">Grand</button>

États

<!-- Désactivé -->
<button class="btn btn-primary" disabled>Désactivé</button>

<!-- Loading (désactivé pendant le chargement) -->
<button class="btn btn-primary" disabled>
  <svg class="animate-spin h-4 w-4" ...>...</svg>
  Enregistrement...
</button>

Avec icône

L'icône précède toujours le texte. Pas d'icône seule dans un btn (utiliser un bouton icon-only dédié).

<!-- Bouton avec icône -->
<button class="btn btn-primary">
  <svg class="h-4 w-4">...</svg>
  Nouvelle commande
</button>

<!-- Icon-only (ghost, avec title pour accessibilité) -->
<button class="btn btn-ghost p-2 rounded" title="Éditer">
  <svg class="h-4 w-4">...</svg>
</button>

Groupe de boutons

Pattern standard pour les barres d'actions : primary à droite, actions destructives isolées à gauche.

<div class="flex items-center justify-between">
  <button class="btn btn-danger btn-sm">Supprimer la commande</button>
  <div class="flex gap-2">
    <button class="btn btn-ghost">Annuler</button>
    <button class="btn btn-primary">Enregistrer</button>
  </div>
</div>