COMPOSANTS

Boutons

Variantes

Cinq variantes couvrent tous les cas. Ne jamais créer de nouvelle variante sans raison forte.

<!-- CTA principal — max 1 par vue -->
<button class="btn btn-primary">Créer une commande</button>

<!-- Action secondaire (outline vert) -->
<button class="btn btn-outline btn-primary">Modifier le devis</button>

<!-- Action tertiaire, navigation, annulation -->
<button class="btn btn-ghost">Annuler</button>

<!-- Action destructive uniquement — toujours avec modal de confirmation -->
<button class="btn btn-error">Supprimer</button>

<!-- Fond foncé (navy) — exports, actions neutres -->
<button class="btn btn-neutral">Exporter</button>

✓ Maximum 1 btn-primary par vue — le CTA doit ressortir seul.

✗ Ne jamais utiliser btn-error sans modal de confirmation.

btn-secondary

Bouton secondaire à bordure navy, utilisé dans les interfaces admin quand le vert primaire serait trop présent. Fond blanc, bordure 1.5px solid navy, texte navy. Hover : fond navy-50.

<button class="btn btn-secondary">Modifier</button>

✓ Utiliser dans les apps admin où le vert primary serait trop prominent pour des actions secondaires.

Tailles

La taille par défaut couvre presque tous les cas. btn-sm pour les tableaux. btn-lg uniquement dans les sections héros.

btn-lg

btn (défaut)

btn-sm

btn-xs

<button class="btn btn-primary btn-lg">Découvrir le catalogue</button>   <!-- héros uniquement -->
<button class="btn btn-primary">Créer un dossier</button>               <!-- défaut -->
<button class="btn btn-primary btn-sm">Traiter</button>                 <!-- tableaux, layouts denses -->
<button class="btn btn-outline btn-primary btn-xs">Voir détail</button> <!-- tableaux compacts -->

États

Les états désactivé et chargement sont obtenus par l'attribut disabled. L'état focus est géré automatiquement par le navigateur.

Normal

Désactivé

Chargement

Focus (auto)

<!-- Normal -->
<button class="btn btn-primary">Enregistrer</button>

<!-- Désactivé (champ manquant, permissions insuffisantes) -->
<button class="btn btn-primary" disabled>Enregistrer</button>

<!-- Chargement — toujours désactiver pendant la requête -->
<button class="btn btn-primary" disabled>
  <span class="loading loading-spinner loading-sm"></span>
  Enregistrement...
</button>

Avec icône

L'icône précède toujours le texte. Pour les boutons icon-only, ajouter un attribut title pour l'accessibilité.

<!-- Bouton avec icône avant le texte -->
<button class="btn btn-primary">
  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  Ajouter
</button>

<!-- Icon-only (ghost, p-2 pour padding carré, title obligatoire) -->
<button class="btn btn-ghost btn-sm p-2" title="Options">
  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/>
  </svg>
</button>

✓ Libellé : verbe + nom. "Créer un dossier", "Supprimer la commande", "Exporter le rapport".

✗ Jamais "Soumettre", "Valider", "OK", "Confirmer" seuls — toujours un libellé explicite.

✗ Jamais <button> pour la navigation — utiliser <a>.