Status
Toast
A short glass note at the bottom of the window after something happened somewhere you are not looking, with one follow-up: "X6 launch video is on Wed, Oct 21.
Preview
Props
| Prop | Type | Description |
|---|---|---|
openRequired | boolean | |
onCloseRequired | () => void | |
messageRequired | React.ReactNode | |
action | { label: string; href?: string; onClick?: (e: React.MouseEvent) => void } | One follow-up, such as Open project. |
icon | IconName | Default checkmark-circle. |
duration | number | Milliseconds before it leaves (default 8000; 0 keeps it). It waits while the pointer or focus is on it. |
closeLabel | string | |
className | string |
Guidelines
A short glass note at the bottom of the window after something happened somewhere you are not looking, with one follow-up: "X6 launch video is on Wed, Oct 21. Open project".
Provide: open, onClose, message, optional action ({ label, href, onClick }), icon (default checkmark-circle), duration (default 8000ms, 0 keeps it).
- Use it to confirm a create or move that closed the thing it happened in (a drawer, a quick add), and to offer the way there. Not for errors: a save that failed uses InlineAlert at the top of the page, where it stays until dismissed.
- One sentence, plain and warm. No exclamation points.
- It is a polite live region, so screen readers hear it without losing their place. It stays while the pointer or keyboard focus is on it, and Escape or the close button dismisses it.
- Bottom center on desktop; on phones it sits above the tab bar, full width less 12px a side.
- It rises in over 180ms and appears without motion when reduced motion is on.