Components / feedback
Toast
Short, transient confirmation that appears over the page and dismisses itself.
import { Toast } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Toast } from '@basiiik/ui';
<Toast>Message sent</Toast>- Toast has no interactive states of its own. Danger renders role=alert, the others role=status; it never takes focus.
durationauto-dismisses (pausing on hover and focus).ToastRegionplaces a stack in a screen corner. - Storybook: Feedback/Toast.
Props
| Prop | Type | Notes |
|---|---|---|
tone | "danger" | "success" | "warning" | "info" | "default" | Default "default" |
children | ReactNode | |
action | { label: string; onClick: () => void } | |
onClose | () => void | |
icon | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
closeLabel | string | |
duration | number | Auto-dismiss after this many milliseconds. Pauses while the pointer or keyboard focus is inside. Keep it at 5000 or more. |
States. Toast has no interactive states of its own. Danger renders role=alert, the others role=status; it never takes focus. duration auto-dismisses (pausing on hover and focus). ToastRegion places a stack in a screen corner.
Native attributes such as className, id and data-* are forwarded to the root element.
Parts
ToastRegion
A stack of Toasts fixed in a corner of the screen. placement picks the corner (bottom-end by default). Each Toast announces itself, so the region is not a live region: it is a labelled landmark (aria-label "Notifications" by default; change it with aria-label). Put the Toasts you want visible inside it.
<ToastRegion placement="bottom-end"><Toast tone="success">Saved</Toast></ToastRegion>ToastRegion props
| Prop | Type | What it does |
|---|---|---|
placement | "bottom-end" | "bottom-start" | "bottom-center" | "top-end" | "top-start" | "top-center" |
Use it when
- Short confirmation after an action
Do not use it when
- Errors that need a decision (use Alert or Modal)
- Critical information that must persist
Rules for agents
- Render Toasts inside a ToastRegion; each Toast announces itself and never takes focus
- One line of text, with at most one action, such as Undo
- Keep duration at 5000 ms or more; it pauses on hover and focus
- Use a Toast only to confirm something the user just did, or a background event they should know about
- Show one Toast at a time where possible; replace rather than stack similar messages
Avoid
- A Toast for an error the user must act on (use Alert or Modal)
- Putting the only way to finish a task in the Toast action
- A duration shorter than 5 seconds, or a Toast with an action that dismisses before it can be reached
- Long or multi-line messages
- Showing a Toast for something the user can already see on screen
Writing the content
- State the result in the past tense: 'Message sent', 'File deleted'
- Action labels are one verb: 'Undo', 'View'
- No full stop for single phrases
- Use sentence case
Keyboard
- Action and close controls are focusable
- Pause auto-dismiss on hover and focus
Accessibility
- Render inside an aria-live region so it is announced
- Do not steal focus
Colour tokens it reads
color.bg.danger.defaultcolor.bg.info.defaultcolor.bg.inversecolor.bg.success.defaultcolor.bg.warning.defaultcolor.text.inversecolor.text.on-dangercolor.text.on-infocolor.text.on-successcolor.text.on-warningRelated
feedback 5 Figma variants Try it in the live demo