Aller au contenu
SkillCodex
Menu

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.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : un petit message enregistré qui disparaîtme dire que le lien a été copiéune notification dans le coin après une action

Toutes les formulations
Enregistrer et partager

Reconnaître

Informer l'utilisateur

Essayer

Le message est-il temporaire, persistant dans son contexte ou global à la page ?

Notification temporaire

Contexte commun aux essais

Un espace de travail signale un changement d'état et doit placer le message selon sa portée, son urgence et sa persistance.

Notification temporaire

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.

Résultat de l’essai

Le lien n'est pas encore copié.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Le message Lien copié apparaît sans déplacer le focus du bouton Copier.
Cas limite
Les messages en file restent lisibles séparément, et aucune autre notification ne couvre une action disponible.

    Ce que cet essai montre

    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.

    Lequel convient à ton besoin ?

    Notification temporaire

    Confirmer un résultat de fond à faible risque

    Alerte dans le contexte

    Expliquer un échec de formulaire ou d'envoi dans son contexte

    Quel composant utilises-tu ici ?
    Différence et sources

    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.

    Consulter les sources

      Parties du spécimen

      Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

      Surface

      Le conteneur visible qui accueille le contenu du composant.

      Position dans l’atlas

      Carte relationnelle

      Repère le chapitre, les concepts proches et la prochaine décision utile.

      • Chapitre

        Informer l'utilisateur

        Notification temporaire appartient à ce groupe de concepts comparés.

      • Ne pas confondre

        Alerte dans le contexte

        Choisis Notification temporaire si tu confirmes un résultat à faible risque que l’utilisateur peut ignorer sans conséquence. Choisis Alerte dans le contexte si le message doit rester visible tant que le problème n’est pas résolu, comme une erreur de formulaire.

        Comparer cette paire
      • Ne pas confondre

        Bannière d'annonce

        Choisis Notification temporaire si tu confirmes un résultat de fond à faible risque qui ne demande aucune action. Choisis Bannière d’annonce si la condition persiste et que l’utilisateur doit la garder en tête en utilisant la page.

        Comparer cette paire
      • Prochaine étape

        Compare les concepts du chapitre avant de retenir une implémentation.

        Ouvrir le chapitre

      Avec tes mots

      Comprendre

      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

      Choisir

      À 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

      Comparer les concepts proches

      Équivalents par plateforme

      Une même interaction peut changer de nom ou de contrat selon la plateforme. Vérifie la correspondance avant de choisir une API.

      • HTML

        Aucune primitive directe

        Aucune primitive directe

        HTML n'a pas d'élément toast ; surface, durée, file et comportement de région live doivent être implémentés.

        Vérifié
      • WAI-ARIA APG

        Aucune primitive directe

        Aucune primitive directe

        L'APG n'a pas de modèle toast ; alert ou status couvre l'annonce, pas tout le contrat du message transitoire.

        Vérifié
      • Radix UI

        Direct

        Toast.Root

        @radix-ui/react-toast 1.2.x

        La primitive fournit provider, zone d'affichage, durée, balayage, annonce et action sûre facultative.

        Vérifié Documentation officielle
      • shadcn/ui

        Direct

        Sonner

        shadcn/ui docs 2026-09-03

        La recette Sonner fournit un hôte et une API de messages ; les décisions critiques exigent toujours une interface persistante.

        Vérifié Documentation officielle
      • Material UI

        Direct

        Snackbar

        Material UI v9.4.0

        Snackbar présente un message bref non bloquant avec une action facultative et une durée contrôlée.

        Vérifié Documentation officielle
      • SwiftUI

        Aucune primitive directe

        Aucune primitive directe

        SwiftUI n'a pas de primitive toast générale ; overlays et alertes ont des contrats de persistance et d'interruption différents.

        Vérifié
      • Jetpack Compose

        Direct

        SnackbarHostState.showSnackbar

        Android Developers 2026-08

        SnackbarHostState met en file des mises à jour brèves et peut exposer une action facultative sans bloquer l'écran.

        Vérifié Documentation officielle
      • Flutter

        Direct

        SnackBar + ScaffoldMessenger

        Flutter API docs 2026-09

        ScaffoldMessenger met les SnackBars en file comme messages brefs non bloquants avec action et fermeture facultatives.

        Vérifié Documentation officielle

      Profil d’impact

      Coûts d’implémentation mesurés et contraintes d’exploitation de ce spécimen SkillCodex. Une valeur non évaluée n’est jamais présentée comme gratuite.

      Rendu
      Client
      Poids différé
      10.3 kB-gzip
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Sum of gzip -9 bytes for the lazy files of module 32054 in .next/server/app/(en)/term/[slug]/page/react-loadable-manifest.json after pnpm build:local at c9f1299.
      Appareils modestes
      Correct
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Loaded the 390 x 844 term route in isolated Chromium with 6x CPU throttling and reduced motion, then exercised the first state change; failures are recorded as non-blocking warnings.
      CPU / GPU
      Radix et React montent un message DOM temporaire ; le retour de balayage utilise des transformations CSS, sans canvas ni WebGL.
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Static source inspection of the target lab module plus an interaction on the isolated Chromium verification route; checked DOM/React work and absence of canvas or WebGL.
      Réduction des animations
      Le contrat global de réduction des animations ramène leurs durées et celles des transitions au minimum ; les mêmes états et contrôles restent disponibles.
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Inspected src/app/globals.css prefers-reduced-motion rules and repeated the target interaction with reducedMotion=reduce in Chromium.
      Repli statique
      Sans JavaScript, la fiche reste sur son repli Chargement localisé ; le profil et le spécimen initial ne sont pas révélés.
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Loaded all ten prerendered routes from a local next start build in Chromium with JavaScript disabled; each HTTP 200 remained on the localized Loading fallback, so the profile and specimen were not revealed.
      Rendu serveur
      S’hydrate
      Mesuré ·
      Environnement
      macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
      Méthode
      Inspected the prerendered route response, then loaded the same route with JavaScript enabled and exercised the hydrated client specimen.
      Maintenance
      Stable

      Bon choix

      • Une confirmation brève et non bloquante après une action dont le résultat est déjà visible.

      À éviter quand

      • Les erreurs, décisions ou instructions qui exigent une action ou doivent rester visibles.

      Checklist de vérification

      Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

      1. 1. À faire

        Déclenche une action courante, comme copier un lien, et continue à utiliser le bouton d’origine.

        Résultat attendu

        Une confirmation brève apparaît sans déplacer le focus ni interrompre ta tâche.

      2. 2. À faire

        Si la notification contient une action ou un bouton Fermer, atteins-le avec Tab et reste dessus.

        Résultat attendu

        La commande est utilisable, et un délai automatique ne la retire pas pendant ton interaction.

      3. 3. À faire

        Déclenche deux confirmations à la suite, puis laisse-les disparaître.

        Résultat attendu

        Les messages restent compréhensibles sans couvrir de commande essentielle ; les informations nécessaires pour continuer existent aussi hors de la notification temporaire.

      Contrat complet
      1. 1La notification ne porte jamais une décision critique
      2. 2Son arrivée ne déplace pas le focus
      3. 3Le temps de lecture se met en pause pendant l'interaction
      4. 4Les messages empilés et leurs actions restent utilisables

      Comprendre → Reconnaître → Choisir → Comparer

      Pack pour ton agent

      Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

      Implémenter correctement

      Construis Notification temporaire sans casser son comportement

      # Implémenter Notification temporaire dans ton agent
      
      ## Objectif
      Implémente Notification temporaire pour ce comportement vérifié : Un bref message non bloquant qui apparaît après un événement et peut disparaître après un temps de lecture suffisant.
      
      ## Prérequis
      - Inspecte d’abord le dépôt, le design system et les tests existants.
      - Préserve les changements sans rapport et borne les fichiers modifiés.
      - Confirme que Notification temporaire répond au besoin avant de coder.
      
      ## Comportement requis
      - Le message temporaire peut disparaître après un temps de lecture suffisant et ne bloque jamais une décision critique.
      - Une région live annonce un nouvel état seulement si la mise à jour est importante et n’a pas déjà le focus.
      
      ## États à couvrir
      - Toast masqué
      - Toast visible
      
      ## Accessibilité
      - Rôle ARIA : status
      - Le contrôle principal ou la région nommée pour Notification temporaire 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.
      - La notification ne vole jamais le focus ; une action facultative reste atteignable sans interrompre la tâche.
      - Elle expire après un temps suffisant, se met en pause pendant l’interaction et peut être fermée sans exiger d’action.
      - 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.
      - Tab atteint l’action d’une notification dans l’ordre normal
      - Échap ferme la notification focalisée lorsque prévu
      
      ## Quand ne pas utiliser
      - Le message contient des instructions critiques
      - Une décision ou erreur de formulaire doit rester visible
      
      ## Critères d’acceptation
      - La notification ne porte jamais une décision critique
      - Son arrivée ne déplace pas le focus
      - Le temps de lecture se met en pause pendant l’interaction
      - Les messages empilés et leurs actions restent utilisables
      
      ## Garde-fous
      - Montre d’abord les changements envisagés avant toute action externe.
      - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
      - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
      
      ## Format de sortie
      - Résultat obtenu ou verdict.
      - Fichiers ou actions concernés.
      - Vérifications exécutées et preuves observables.
      - Blocages ou limites restantes.
      
      • @radix-ui/react-toast
      • Prérequis · Accès au dépôt, au design system et aux tests
      Pourquoi ça marche
      • Le besoin est relié au comportement canonique avant toute décision technique.
      • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
      • Les critères d’acceptation et le format de sortie rendent la vérification observable.

      À essayer ensuite

      Vérifie Notification temporaire sur un parcours réel

      # Vérifier Notification temporaire après l’implémentation
      
      ## Objectif
      Audite l’implémentation de Notification temporaire au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
      
      ## Contrôles
      - Rejoue le plus petit parcours représentatif.
      - Contrôle le clavier, le focus, le nom accessible et les annonces.
      - Relie chaque écart à un critère d’acceptation précis.
      
      ## Garde-fous
      - Montre d’abord les changements envisagés avant toute action externe.
      - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
      - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
      
      ## Format de sortie
      - Résultat obtenu ou verdict.
      - Fichiers ou actions concernés.
      - Vérifications exécutées et preuves observables.
      - Blocages ou limites restantes.
      

      sha256:66d6f1ca0c223a7a9be130bd58fe4fe352149ee55d3077314f6ad1f7e26db635

      Diagnostiquer un problème

      Trouve et corrige le défaut de Notification temporaire

      # Déboguer Notification temporaire dans ton agent
      
      ## Symptôme observé
      [DÉCRIS ICI LE SYMPTÔME]
      
      ## Contrôles observables
      - Reproduis le problème avec le plus petit parcours pertinent.
      - Compare le comportement aux états et transitions documentés de Notification temporaire.
      - Vérifie le clavier, le focus, le nom accessible et les annonces.
      
      ## Causes possibles
      - La primitive employée ne correspond pas au comportement attendu.
      - Un état, une transition ou un retour de focus manque.
      - Le composant voisin capture un événement ou masque un signal accessible.
      
      ## Corrections bornées
      - Corrige la cause reproduite sans recréer les composants voisins.
      - Conserve le contrat public et ajoute un test ciblé de non-régression.
      - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
      
      ## Vérification finale
      - La notification ne porte jamais une décision critique
      - Son arrivée ne déplace pas le focus
      - Le temps de lecture se met en pause pendant l’interaction
      - Les messages empilés et leurs actions restent utilisables
      
      ## Garde-fous
      - Montre d’abord les changements envisagés avant toute action externe.
      - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
      - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
      
      ## Format de sortie
      - Résultat obtenu ou verdict.
      - Fichiers ou actions concernés.
      - Vérifications exécutées et preuves observables.
      - Blocages ou limites restantes.
      
      • @radix-ui/react-toast
      • Prérequis · Accès au dépôt, au design system et aux tests
      Pourquoi ça marche
      • Le symptôme explicite évite de partir d’une correction supposée.
      • Les contrôles séparent comportement, accessibilité et interférences voisines.
      • La correction reste bornée et doit produire une preuve de non-régression.

      À essayer ensuite

      Verrouille la correction de Notification temporaire

      # Empêcher la régression de Notification temporaire
      
      ## Objectif
      Transforme la cause reproduite en test de non-régression ciblé et compare Notification temporaire aux concepts voisins avant d’élargir la correction.
      
      ## Contrôles
      - Prouve que le test échoue avant la correction.
      - Prouve qu’il passe après la correction bornée.
      - Vérifie qu’aucun composant voisin n’a changé de comportement.
      
      ## Garde-fous
      - Montre d’abord les changements envisagés avant toute action externe.
      - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
      - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
      
      ## Format de sortie
      - Résultat obtenu ou verdict.
      - Fichiers ou actions concernés.
      - Vérifications exécutées et preuves observables.
      - Blocages ou limites restantes.
      

      sha256:680ca3ac8738839359b9c6c7c063fdf1c7c78f8365009fc478135491c2f2a4b9

      Fiche complète, enregistrement et provenance

      Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

      Digest du Pack: sha256:8e586e20966adfc4f6393491b5722e3d45ff1bd225a1eed3e89105bf8e9528bd

      Dans le code

      TechnologiePrimitiveVersionLimite
      @radix-ui/react-toast

      Toast.Root

      @radix-ui/react-toast@1.2.19Un toast est transitoire et non bloquant. Les erreurs critiques et décisions obligatoires exigent une interface persistante dans le contexte.

      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
      Les messages en file restent lisibles séparément, et aucune autre notification ne couvre une action disponible.

      Signaux visuels

      • Message compact loin du contenu principal
      • Souvent empilé près d'un bord
      • Peut inclure une courte action secondaire

      Signaux comportementaux

      • Apparaît après un événement
      • Ne bloque jamais la tâche principale
      • Le délai se met en pause pendant l'interaction

      Accessibilité

      Rôle
      status
      Nom accessible
      Le contrôle principal ou la région nommée pour Notification temporaire 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 clavier
      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.
      Défilement
      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

      Implémentations

      Ouvrir la matrice HTML, ARIA, Radix et shadcn
      • Toast.Root

        implementationKind
        radix
        nativeElement
        Non applicable
        ariaPattern
        status or alert according to urgency
        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
        sourceId
        source-ui-radix-toast
        deprecationStatus
        active
        replacement
        Non applicable
        validFrom
        Non applicable
        validUntil
        Non applicable

        Limite d’équivalence : Un toast est transitoire et non bloquant. Les erreurs critiques et décisions obligatoires exigent une interface persistante dans le contexte.

        Vérifier la source du binding

      Sources

      • Radix Primitives: Toast
        sourceId
        source-ui-radix-toast
        kind
        documentation
        canonicalUrl
        https://www.radix-ui.com/primitives/docs/components/toast
        publisher
        Radix Primitives
        sourceRevision
        http-etag:W/"c91f44d07e6900e8e3ca3b32222f8dfd"
        consultedAt
        2026-07-19
        license
        Non indiquée
        contentDigest
        sha256:740d95d5e4c007032732dfa6729acb2af3cff75169a73303c20bc0411946ee53
        status
        verified

        Affirmation couverte : Notification temporaire : parties, API d'état, interactions et limites d'implémentation documentées pour Radix Toast.

      • WCAG 2.2: Status Messages
        sourceId
        source-ui-wcag-understanding-status-messages
        kind
        documentation
        canonicalUrl
        https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
        publisher
        W3C WAI
        sourceRevision
        http-last-modified:2026-07-02T10:07:49Z
        consultedAt
        2026-07-19
        license
        Non indiquée
        contentDigest
        sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
        status
        verified

        Affirmation couverte : Notification temporaire : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

      • WAI-ARIA 1.2: Live Region Attributes
        sourceId
        source-ui-wai-aria-live-regions
        kind
        standard
        canonicalUrl
        https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions
        publisher
        W3C WAI
        sourceRevision
        W3C-REC-wai-aria-1.2-20230606
        consultedAt
        2026-07-19
        license
        Non indiquée
        contentDigest
        sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
        status
        verified

        Affirmation couverte : Notification temporaire : propriétés normatives des régions live pour le comportement d'annonce d'état.

      • WAI-ARIA 1.2: Roles Model
        sourceId
        source-ui-wai-aria-roles
        kind
        standard
        canonicalUrl
        https://www.w3.org/TR/wai-aria-1.2/#roles
        publisher
        W3C WAI
        sourceRevision
        W3C-REC-wai-aria-1.2-20230606
        consultedAt
        2026-07-19
        license
        Non indiquée
        contentDigest
        sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
        status
        verified

        Affirmation couverte : Notification temporaire : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

      • WAI-ARIA APG: Alert Pattern
        sourceId
        source-ui-aria-alert
        kind
        documentation
        canonicalUrl
        https://www.w3.org/WAI/ARIA/apg/patterns/alert/
        publisher
        W3C WAI
        sourceRevision
        http-last-modified:2026-07-09T07:07:35Z
        consultedAt
        2026-07-19
        license
        Non indiquée
        contentDigest
        sha256:e61389c00faeb90ba7717be73a536138c2d7250b21a26e88cc9ef0f1c4987c41
        status
        verified

        Affirmation couverte : Notification temporaire : guide APG informatif pour le modèle alerte : rôles, états, relations et interactions au clavier.