Toast
Notification temporaire
Un bref message non bloquant qui apparaît après un événement et peut disparaître après un temps de lecture suffisant.
Avec vos mots
Ce que les gens décrivent
Alias documentés : snackbar, notification éphémère, message temporaire
- un petit message enregistré qui disparaît
- me dire que le lien a été copié
- une notification dans le coin après une action
- confirmer brièvement la fin de l'envoi
- afficher le succès sans arrêter mon travail
- un message temporaire avec une annulation facultative
Essayer
Informer l'utilisateur
Comparer les trois comportements
Scénario comparatif partagé : Un espace de travail signale un changement d'état et doit placer le message selon sa portée, son urgence et sa persistance.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Notification temporaire
Toast est temporaire et détaché de la source ; Inline alert reste près du contenu concerné, tandis que Banner communique un message global de page.
Votre mission
Copier le lien, entendre ou lire la confirmation, focaliser Fermer et vérifier que le délai se met en pause.
Cas limite à vérifier
Avec réduction des animations, la notification apparaît et disparaît sans glisser ; les messages en file ne couvrent jamais leurs actions.
Mission
Notification temporaire - Toast
Copier le lien, entendre ou lire la confirmation, focaliser Fermer et vérifier que le délai se met en pause.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Surface
Le conteneur visible qui accueille le contenu du composant.
À utiliser quand
- Confirmer un résultat de fond à faible risque
- Proposer une courte annulation après une action réversible
À éviter quand
- Le message contient des instructions critiques
- Une décision ou erreur de formulaire doit rester visible
Comparer les concepts proches
Inline alert reste près du contenu affecté ; Toast est temporaire et détaché, tandis que Banner traite une condition globale de page.
Alerte dans le contexteBanner couvre une condition globale de page ; Inline alert appartient à une tâche précise, tandis que Toast est une mise à jour temporaire.
Bannière d'annonceBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Disparaître sans bloquer
Le message temporaire peut disparaître après un temps de lecture suffisant et ne bloque jamais une décision critique.
Annoncer les changements utiles
Une région live annonce un nouvel état seulement si la mise à jour est importante et n'a pas déjà le focus.
États
Toast masqué
Toast masqué
Toast visible
Toast visible
Transitions d’état
Toast masqué → Toast visible
La copie du lien de partage publie une confirmation à faible risque sans déplacer le focus.
Toast visible → Toast masqué
Fermer est activé ou le délai non suspendu arrive à son terme.
Scénarios de test
- Contexte
- Copier un lien de partage produit une confirmation à faible risque avec un contrôle Fermer facultatif.
- Mission
- Copier le lien, entendre ou lire la confirmation, focaliser Fermer et vérifier que le délai se met en pause.
- État principal
- Le message Lien copié apparaît sans déplacer le focus du bouton Copier.
- Cas limite
- Avec réduction des animations, la notification apparaît et disparaît sans glisser ; les messages en file ne couvrent jamais leurs actions.
Accessibilité
- Role
- status for polite success updates
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- La notification ne vole jamais le focus ; une action facultative reste atteignable sans interrompre la tâche.
- Fermeture
- Elle expire après un temps suffisant, se met en pause pendant l'interaction et peut être fermée sans exiger d'action.
- Scroll
- Le message ne verrouille ni ne déplace jamais la page. Une pile de messages reste accessible sans couvrir la cible de focus actuelle.
- Annonce
- Un statut live poli annonce le nouveau texte une fois ; les échecs critiques ou répétés utilisent un message persistant dans le contexte.
- Clavier
- Tab atteint l'action d'une notification dans l'ordre normal
- Échap ferme la notification focalisée lorsque prévu
Bindings
Toast.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- toast
- radixPrimitive
- Toast
- shadcnRecipe
- Toast
- runtimeDependency
- @radix-ui/react-toast@1.2.19
- packageName
- @radix-ui/react-toast
- exportName
- Toast.Root
- exactVersion
- 1.2.19
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : A toast is transient and nonblocking. Critical errors and required decisions need persistent in-context UI instead.
Vérifier la source du binding
Sources
- Radix Primitives: Toast
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Toast: documented Radix Toast viewport, lifetime, dismissal, and nonblocking interaction behavior.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Toast: WCAG status-message requirements used to qualify non-focus-moving announcements.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.