Toast de succès

Il s’agit d’une interface utilisateur qui s’affiche sur le bord de l’écran pour informer l’utilisateur que son action (enregistrer, envoyer, etc.) a été effectuée avec succès.

Aperçu

Cas d’utilisation et fonctionnalités

• Commentaires sur le système : communique immédiatement les résultats des actions de l’utilisateur, telles que “Enregistré” ou “Soumission terminée”.
• Notification de processus asynchrone : Idéal pour les cas où vous souhaitez être averti discrètement sans interférer avec le travail de l’utilisateur, par exemple lorsqu’un processus est terminé en arrière-plan.
• Disparition automatique : disparaît généralement automatiquement après un certain temps pour libérer de l’espace sur l’écran.

Points clés du design et de l’UX (Design & UX)

• Placement discret : placez-le dans le coin de l’écran (par exemple en bas à droite ou en haut à droite) afin qu’il n’interfère pas avec le contenu principal ou le travail.
• Clarté visuelle : utilisez des icônes et des bordures vertes (« émeraude » ou « vert ») pour indiquer que vous avez réussi à communiquer intuitivement des notifications positives.
• Fonction de fermeture manuelle : fournit un bouton × (fermer) permettant aux utilisateurs de rejeter eux-mêmes les notifications, leur donnant ainsi un plus grand sentiment de contrôle.

Comment personnaliser (Guide de personnalisation)

• Couleur par statut : en remplaçant la classe Tailwind, vous pouvez répondre à diverses conditions en changeant la couleur en rouge (“rouge”) pour les notifications d’erreur, jaune (“jaune”) pour les avertissements et bleu (“bleu”) pour les informations.
• Ajout d’une animation : vous pouvez ajouter une animation qui glisse depuis le bas lorsqu’elle est affichée ou une animation de fondu lorsqu’elle disparaît en utilisant CSS ou JS.

Code d’implémentation (Implémentation)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>