'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
Toast
A brief message that confirms something happened, with an optional action like Undo.
Ant Design: message, notification
import { ToastProvider, useToast } from '@alea/ui';
Examples
Toasts
show() from anywhere under ToastProvider. Hover or focus pauses the timer.
With an action
Undo is the classic.
Props
ToastProvider props
Shows toasts anywhere below it; put it once near the root.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "bottom-end" | "bottom" | "top-end" | "top" | 'bottom-end' | Where toasts stack: bottom-end (default), bottom, top-end or top. |
Accessibility
- Announced politely (errors assertively); timers pause on hover and focus.
- Errors stay until closed.
Keyboard
| Key | Does |
|---|---|
| F6 or Tab | Reaches the notifications region |
| Enter | Runs the action |
| Escape | Closes the focused toast |
Do and don't
Do
- Confirm actions people can't see the result of.
Don't
- Don't put the only way to do something in a toast.