Notifications

Alertes (persistantes, inline)

Intégrées dans le contenu de la page. Persistantes jusqu'à action utilisateur ou changement d'état. Utiliser pour les erreurs nécessitant une action, les avertissements contextuels, et les informations critiques.

<div class="space-y-3">
  <div class="alert alert-info">
    <svg class="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <span>La synchronisation avec le catalogue prendra 2–3 minutes.</span>
  </div>
  <div class="alert alert-success">
    <svg class="w-5 h-5 shrink-0" ...></svg>
    <span>Commande CMD-0241 validée avec succès.</span>
  </div>
  <div class="alert alert-warning">
    <svg class="w-5 h-5 shrink-0" ...></svg>
    <span>Stock insuffisant pour 3 références. Vérifiez avant de valider.</span>
  </div>
  <div class="alert alert-error">
    <svg class="w-5 h-5 shrink-0" ...></svg>
    <span>Erreur lors de l'import. Le fichier CSV est invalide.</span>
  </div>
</div>

<!-- Variants: alert-info / alert-success / alert-warning / alert-error -->

Alerte dismissible (flash de layout)

Le message flash rendu par le layout (notice / alert Rails). Même alerte, dans le flux de la page, plus un bouton de fermeture. Réservée au flash : une alerte inline contextuelle n'est jamais dismissible, elle disparaît quand la condition qui la motive disparaît.

<div class="alert alert-success">
  <svg class="w-5 h-5 shrink-0" ...></svg>
  <span>Commande CMD-0241 créée.</span>
  <button class="btn btn-ghost btn-sm ml-auto" aria-label="Fermer"
          onclick="this.closest('.alert').remove()">
    <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="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</div>

<!-- Rails : dans le layout, au-dessus du yield -->
<!--
<% flash.each do |type, message| %>
  <div class="alert alert-<%= type.to_s == "notice" ? "success" : "error" %> mb-4">
    <svg class="w-5 h-5 shrink-0" ...></svg>
    <span><%= message %></span>
    <button class="btn btn-ghost btn-sm ml-auto" aria-label="Fermer"
            onclick="this.closest('.alert').remove()">
      <svg class="w-4 h-4" ...></svg>
    </button>
  </div>
<% end %>
-->

Avertissement d'un élément

Une mise en garde qui concerne une seule ligne d'un bloc (un article sous son minimum de commande, un article retiré du catalogue) s'écrit sous cette ligne en warning-text, sans répéter le nom de la ligne. Seules les mises en garde qui ne concernent aucune ligne vont dans une alert-warning sous le bloc.

<div class="warning-text">
  <svg class="w-3.5 h-3.5 shrink-0 mt-px">…</svg>  <!-- heroicon exclamation-triangle -->
  <span>BINI ne vend pas sous 50 pièces : 2 demandées, la commande sera refusée en l'état.</span>
</div>

Toast (transient, auto-dismiss)

Notifications éphémères positionnées en coin supérieur droit. Auto-dismiss après 4 secondes. Réserver aux confirmations de retour d'action directe : "Enregistré", "Supprimé", "Copié".

<div class="toast toast-top toast-end z-50">
  <div class="alert alert-success">
    <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <span>Enregistré.</span>
  </div>
</div>

<!-- En production : ajouter/supprimer le toast via JS après 4 secondes -->
<!-- Variants : alert-success / alert-info / alert-warning -->

Toast avec JS (exemple Stimulus)

En Rails avec Hotwire, injecter le toast via un Turbo Stream et le retirer automatiquement via un Stimulus controller.

// Exemple Stimulus controller
connect() {
  setTimeout(() => this.element.remove(), 4000);
}

Règles