Actions destructives

Règle absolue

Toute action destructive requiert une confirmation explicite. Le modal doit nommer l'objet concerné, décrire les conséquences, et proposer un bouton libellé comme l'action, jamais "OK" ou "Oui".

Modal de confirmation (impact faible / réversible)

Pour les actions récupérables ou facilement réversibles. Message simple, bouton btn-error, pas de saisie requise.

<button class="btn btn-error btn-sm" onclick="document.getElementById('modal-soft').showModal()">
  Archiver la commande
</button>
<dialog id="modal-soft" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Archiver CMD-0241 ?</h3>
    <p class="py-4 text-sm text-base-content/70">
      La commande sera archivée et n'apparaîtra plus dans la liste principale.
      Vous pouvez la restaurer depuis les archives.
    </p>
    <div class="modal-action">
      <form method="dialog"><button class="btn btn-ghost">Annuler</button></form>
      <button class="btn btn-error">Archiver</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Modal de confirmation (impact fort / irréversible)

Pour les suppressions définitives à fort impact : demander à l'utilisateur de saisir le nom de l'objet pour débloquer le bouton de confirmation.

<button class="btn btn-error btn-sm" onclick="document.getElementById('modal-hard').showModal()">
  Supprimer définitivement
</button>
<dialog id="modal-hard" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Supprimer CMD-0241 définitivement ?</h3>
    <p class="py-4 text-sm text-base-content/70">
      Cette action est irréversible. Tous les articles, documents et l'historique
      de cette commande seront supprimés.
    </p>
    <fieldset class="fieldset mb-4">
      <legend class="fieldset-legend">Tapez CMD-0241 pour confirmer</legend>
      <input type="text" id="confirm-input" class="input w-full" placeholder="CMD-0241"
             oninput="document.getElementById('confirm-delete-btn').disabled = this.value !== 'CMD-0241'">
    </fieldset>
    <div class="modal-action">
      <form method="dialog"><button class="btn btn-ghost">Annuler</button></form>
      <button id="confirm-delete-btn" class="btn btn-error" disabled>Supprimer définitivement</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Undo toast (action réversible)

Pour les actions faibles et récupérables : exécuter immédiatement, puis proposer un délai d'annulation de 5 secondes. Aucun modal requis.

<div class="toast toast-top toast-end z-50">
  <div class="alert alert-info gap-3">
    <span class="text-sm">Commande archivée.</span>
    <button class="btn btn-ghost btn-xs">Annuler</button>
  </div>
</div>

Règles