Notification temporaire
إشعار مؤقتToast
Stable
src/dsm/components/toast.tsxLa notification temporaire confirme le résultat d'une action (envoi, copie, erreur réseau) sans interrompre le parcours. Elle disparaît d'elle-même et reste consultable au clavier via la touche F6.
Import
import { ToastProvider } from "@/dsm/components/toast";Exemples
Par défaut
Déclenchée par un bouton, avec titre et description.
LTR
Tons
info, succès, avertissement, erreur.
LTR
Avec action
Un bouton « Annuler » directement dans la notification.
LTR
Usage
Quand l'utiliser
- Utilisez-la pour confirmer une action déjà effectuée (« Votre demande a été transmise ») que l'utilisateur n'a pas besoin de revoir.
- Ajoutez une `action` (« Annuler ») quand l'utilisateur peut encore revenir en arrière juste après l'action.
Quand ne pas l'utiliser
- N'y placez pas une information que l'utilisateur doit absolument lire : une notification peut disparaître avant d'être vue.
- Ne l'utilisez pas pour une erreur de validation de formulaire : préférez un message porté par le champ concerné.
Accessibilité & langues
Accessibilité
- `ToastProvider` doit englober l'ensemble de la vue pour que la touche F6 permette d'atteindre la zone des notifications.
- Chaque notification est glissable au doigt pour être écartée, en plus du bouton de fermeture.
- Le ton `error` porte une priorité d'annonce plus élevée pour les lecteurs d'écran.
RTL & multilingue
- La pile de notifications est ancrée en fin de ligne (`end-4`) : elle apparaît à gauche de l'écran en arabe.
- La bordure d'accent (`border-s-4`) reste du côté « début » quel que soit le sens de lecture.
Propriétés
ToastProvider
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| limit | number | 3 | Nombre maximal de notifications affichées simultanément. |
| timeout | number | 5000 | Délai par défaut avant fermeture automatique, en millisecondes. |
Toaster
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| — | — | — | Aucune prop : rend le portail et la pile de notifications. À placer une fois par `ToastProvider`. |
useToast()
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| add(options) | (options: ToastOptions) => string | — | Affiche une notification et renvoie son identifiant. |
| options.title | ReactNode | — | Titre court de la notification. |
| options.description | ReactNode | — | Texte complémentaire. |
| options.tone | "info" | "success" | "warning" | "error" | info | Couleur d'accent et icône. |
| options.action | { label: ReactNode; onClick: () => void } | — | Bouton d'action secondaire dans la notification. |
| options.timeout | number | — | Délai spécifique à cette notification, remplace celui du `ToastProvider`. |
| close(id) | (id?: string) => void | — | Ferme une notification précise, ou toutes si omis. |