Components

Toast

A short message about the result of an action that appears in a corner of the page, stacks and can be swiped away.

Storybook: Storybook
Source: Source

Role and semantics

Toaster renders a live region through Base UI Toast with role="region" and aria-label="Notifications" (aria-live="polite"). Neutral, success, info and warning toasts are announced politely. danger is sent at high priority: Base UI announces it at once through a visually hidden role="alert" copy, and the toast gets role="alertdialog". Each toast is named by its title.

Keyboard

Key	Behaviour
F6	Moves focus into the toast region; F6 again returns focus to where it was.
Tab / Shift+Tab	Moves between toasts, actions and close buttons.
Enter / Space	Runs the action or the close button.
Escape	Closes the focused toast.

Focus

A toast never steals focus. Focusing the region expands the stack and pauses the timer. F6 returns focus from the region to where it was.

Example	Output
Success	“Changes saved, Your latest edit has been saved.” (when its turn comes)
Error	“Could not save, Check your connection and try again.” (at once)
Loading → success	“Saving”, then “Changes saved”

Contrast

Text on color-surface-raised reaches at least 4.5:1 and status icons at least 3:1. Tone is also given by the icon shape and the title, not only by colour.

WCAG 2.2

Criterion	How Toast meets it	What product teams do
2.2.1 Timing adjustable	At least 5 s; pauses on hover and on focus; errors and toasts with an action stay.	Do not leave important information only in a toast.
4.1.3 Status messages	A live region, read without moving focus.	Nothing.
2.1.1 Keyboard	Reached with F6 and Tab; Escape closes.	Nothing.
2.5.7 Dragging movements	A close button sits next to the swipe.	Nothing.
1.4.1 Use of colour	Tone is also given by the icon shape and the title.	Write clear titles.