Composants

Modals

Modal standard

Pour les formulaires courts, confirmations non-destructives, informations contextuelles.

Modifier le statut

Nouveau statut Note interne

<!-- Backdrop -->
<div class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50">
  <!-- Modal -->
  <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
    <!-- Header -->
    <div class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-gray-100">
      <h2 class="font-accent font-bold text-mc-navy text-lg">Titre du modal</h2>
      <button class="btn btn-ghost p-1.5 rounded" aria-label="Fermer">✕</button>
    </div>
    <!-- Body -->
    <div class="px-6 py-4">...</div>
    <!-- Footer -->
    <div class="flex justify-end gap-2 px-6 py-4 bg-gray-50 rounded-b-lg">
      <button class="btn btn-ghost">Annuler</button>
      <button class="btn btn-primary">Confirmer</button>
    </div>
  </div>
</div>

Modal de confirmation destructive

Obligatoire pour toute action irréversible : suppression, annulation, archivage. Jamais de browser confirm(). Le bouton de confirmation est toujours rouge et explicitement nommé.

Supprimer la commande CMD-0241 ?

Cette action est irréversible. Les données de cette commande et ses fichiers associés seront définitivement supprimés.

✓ Toujours nommer l'objet dans le titre ("Supprimer CMD-0241", pas juste "Supprimer")

✓ Toujours décrire la conséquence irréversible dans le corps

✓ Bouton de confirmation rouge (btn-danger) avec label explicite

✓ Bouton Annuler à gauche du bouton de confirmation

✗ Jamais utiliser window.confirm() ou alert()

✗ Ne pas pré-sélectionner le bouton destructif (évite les clics accidentels)

Tailles de modal

Taille	Classe	Quand l'utiliser
Small	max-w-sm	Confirmation simple, alerte
Medium	max-w-md	Formulaire court (2-4 champs)
Large	max-w-lg	Formulaire plus long, prévisualisation
XL	max-w-2xl	Exception — préférer une page dédiée