Accessibility
What screen readers hear, and how toasts respond to system settings.
These work without configuration.
Screen readers
- iOS: each toast is announced by VoiceOver when it appears. Errors interrupt what VoiceOver is saying; other types wait until it finishes.
- Android: each toast is a live region, which TalkBack reads. Errors are assertive, so they interrupt; other types wait their turn.
Mark another toast as urgent with important. It interrupts like an error, and
it goes ahead of the queue:
toast('Your session expires in one minute', { important: true });A description is announced after the message.
A toast whose message is an element, not a string, has no text to announce. Give it one:
toast(<RichMessage order={order} />, { accessibilityLabel: `Order ${order.id} shipped` });Toasts with an action or close button expose the message and each button separately, so VoiceOver and TalkBack can reach the buttons.
Rich toasts
| Toast | What a screen reader hears |
|---|---|
| Progress | The message when it starts, and the outcome when it ends. The bar and percentage change too often to read, so they are hidden from it. |
| Steps | Each step with its place: “Uploading, step 2 of 3”. The outcome is read on its own. |
| Repeats | The message with its count: “No connection. 3 times”. Repeats do not announce again. |
| Expandable | A “Show details” button, reported as expanded or collapsed. The details are read once open. |
| Undo countdown | An “Undo” button. The draining ring is decoration. |
| Notification | Its title and body. The avatar is decoration. |
Reduce Motion
Toasts fade in and out where they sit, with no travel or scaling, and icons arrive already drawn: no pop and no checkmark draw-in. The stack still moves up when a toast leaves, so the change is visible.
Reduce Transparency
On iOS 26, toasts use the opaque surface instead of Liquid Glass. On the web,
the browser’s prefers-reduced-transparency setting does the same for the
frosted glass.
Text size
Toast text follows the system text size, up to twice the default. At the
larger sizes a toast takes up to six lines instead of three, so a message is
not cut short. Change the size cap with the maxFontSizeMultiplier token, or
remove it with null:
<Toaster theme={{ maxFontSizeMultiplier: null }} />Haptics
Success, warning and error toasts play the system’s notification haptic when they appear, the pattern iOS and Android keep for the outcome of a task. Info, loading and plain toasts play none.
Turn them off for a Toaster, or for one toast:
<Toaster haptics={false} />
toast.success('Saved', { haptics: false });Collapsed stacks
A stacked Toaster hides the content of toasts tucked behind the front one.
While VoiceOver or TalkBack is running, the stack stays fanned out instead.
What did you think of this content?
Glad it helped. A star on GitHub is how other people find it.
Thank you. The issue that just opened goes straight to the maintainer; say what was missing and the page gets fixed.