Toast

Systeme de notifications toast avec ToastProvider, hook useToast et methodes success/error/warning/info.

Apercu

Le systeme de toast de packages/ui fournit des notifications non intrusives pour le retour utilisateur. Il comprend un ToastProvider pour le rendu des toasts et un hook useToast pour les declencher depuis n'importe quel composant.

Configuration

Ajoutez ToastProvider a votre layout racine pour que les toasts puissent s'afficher partout dans l'application :

// app/layout.tsx
import { ToastProvider } from "@saas/ui";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ToastProvider />
      </body>
    </html>
  );
}

Le provider affiche un conteneur pour les elements toast, generalement positionne en bas a droite de la fenetre.

Hook useToast

Importez et appelez useToast dans n'importe quel composant client :

"use client";

import { useToast } from "@saas/ui";

export default function SaveButton() {
  const { toast } = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      toast({ title: "Saved", description: "Your changes have been saved." });
    } catch {
      toast({ title: "Error", description: "Failed to save.", variant: "destructive" });
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

Methodes Toast

Succes (par defaut)

toast({
  title: "Success",
  description: "Operation completed.",
});

Erreur / Destructif

toast({
  title: "Error",
  description: "Something went wrong.",
  variant: "destructive",
});

Avec action

toast({
  title: "Item deleted",
  description: "The item has been removed.",
  action: <button onClick={undo}>Undo</button>,
});

Options Toast

Propriete	Type	Description
`title`	`string`	Texte de titre en gras
`description`	`string`	Texte du corps sous le titre
`variant`	`"default" \| "destructive"`	Style visuel
`action`	`ReactNode`	Bouton d'action optionnel
`duration`	`number`	Delai de disparition automatique en ms (defaut : 5000)

Toasts multiples

Les toasts multiples s'empilent automatiquement. Les nouveaux toasts apparaissent en bas de la pile. Chaque toast disparait automatiquement apres sa duration sauf si l'utilisateur le survole.

Stylisation

Les styles des toasts sont definis dans le package UI. Classes principales :

Classe	Fonction
`fixed bottom-4 right-4`	Positionne en bas a droite
`rounded-lg border shadow-lg`	Apparence en forme de carte
`bg-white text-gray-900`	Couleurs de la variante par defaut
`bg-red-600 text-white`	Couleurs de la variante destructive
`animate-in slide-in-from-bottom`	Animation d'entree

Conseils

Utilisez la variante par defaut pour les messages de succes et d'information.
Reservez la variante destructive pour les erreurs et les echecs.
Gardez les messages toast courts (moins de 10 mots pour le titre, moins de 20 pour la description).
N'utilisez pas les toasts pour des informations critiques necessitant un acquittement de l'utilisateur ; utilisez plutot une boite de dialogue.

Fini ? Marquez cette page comme terminée.

Toast

On this page