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 -->

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