Sonner (Toast)

Notifications toast utilisant la librairie Sonner. Le composant Toaster est monte une seule fois dans le layout racine. Les toasts sont declenches via la fonctiontoast() importee depuis "sonner". S'adapte automatiquement au theme clair/sombre.

Types de toast

Cliquez sur chaque bouton pour declencher un toast du type correspondant.

Toast avec promesse

Utilisez toast.promise() pour afficher automatiquement les etats loading, success et error d'une operation asynchrone.

Toast avec action

Ajoutez un bouton d'action dans le toast, par exemple pour annuler une suppression.

Configuration

Le composant Toaster doit etre monte une seule fois dans le layout racine de l'application. Il s'adapte automatiquement au theme via next-themes.

// app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

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

API toast()

Fonctions

Prop	Type	Default	Description
toast(message, options?)	function	—	Affiche un toast par defaut.
toast.success(message, options?)	function	—	Toast de succes avec icone verte.
toast.error(message, options?)	function	—	Toast d'erreur avec icone rouge.
toast.info(message, options?)	function	—	Toast informatif avec icone bleue.
toast.warning(message, options?)	function	—	Toast d'avertissement avec icone orange.
toast.promise(promise, options)	function	—	Toast qui suit l'etat d'une promesse (loading, success, error).

Options

Prop	Type	Default	Description
description	string	—	Texte de description affiche sous le titre du toast.
duration	number	4000	Duree d'affichage en ms avant disparition automatique.
action	{ label: string, onClick: () => void }	—	Bouton d'action affiche dans le toast.
position	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| ...	"bottom-right"	Position du toast a l'ecran.

Toaster (composant)

Prop	Type	Default	Description
theme	"light" \| "dark" \| "system"	"system"	Theme du toast. Automatiquement lie au theme de next-themes.
position	string	"bottom-right"	Position par defaut de tous les toasts.
richColors	boolean	false	Active les couleurs enrichies pour les variantes success, error, etc.