Feedback
Toast
A brief, non-blocking message after an action, with an optional undo.
Live example
Usage
const { toast } = useToast();
toast({ title: 'Booking saved', tone: 'success', action: { label: 'Undo', onClick: undo } });Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | none | Short message. |
description? | string | none | Optional detail. |
tone? | 'neutral' | 'success' | 'danger' | 'neutral' | danger is announced assertively. |
duration? | number | 6000 | Auto-dismiss in ms, paused on hover and focus. 0 keeps it. |
action? | { label: string; onClick: () => void } | none | One optional action, such as Undo. |
Do and don't
Do
- Confirm actions that changed data.
- Offer Undo instead of a confirmation dialog for reversible actions.
Don't
- Put the only copy of important information in a toast.
- Stack many toasts; the provider keeps at most three.
Accessibility
- Messages are announced through live regions that exist from page load, which is more reliable than inserting role status nodes.
- Timers pause while the pointer or focus is on the toast (WCAG 2.2.1 timing adjustable).
- Each toast has a dismiss button named after its message.
Keyboard
| Keys | Action |
|---|---|
| Tab | Reaches the toast action and dismiss buttons in the notifications region |