Aller au contenu

Toast

Ce contenu n’est pas encore disponible dans votre langue.

A toast confirms a result without taking focus: “Saved”, “Published”. It uses the same verb as the button that caused it. It never opens a modal, and anything the person must act on belongs in the page, not in a toast that disappears.

Read from the component manifest, so this is the component’s own contract. See Overlays for layers, stacking and dismissal shared by all layers.

Stagebeta
Keyboard
  • F6 moves focus to the toast region
  • Tab reaches the action and the dismiss button
  • Escape dismisses the focused toast
Dismissal
  • escape: dismisses the focused toast
  • outside press: no
  • close button: yes
  • timer: 5 s, 9 s with an action, paused on hover and focus
StackingAbove dialogs and popovers (z-toast); a toast never opens a modal, and a modal never waits on one.
Accessibility
  • The region is a labelled live region: a polite toast is announced when the screen reader is free and an urgent one at once, without moving focus; F6 moves focus to the region. The timer pauses while the pointer or focus is on a toast. Every toast has a dismiss button and at most one action. At most three show at once.
PatternAPG: alert
DocsStorybook
Responsable
Okrado founders
Mis à jour le
À revoir avant le