Toast
A toast is a short confirmation in a polite live region at the bottom of the screen. It replaces alert() for results such as Processed 12 journeys.
Confirmation, action and error
Show code
toast({ message: "Processed 12 journeys", tone: "teal" })When to use
- Use it for a result the person caused and does not need to act on.
- Hold 5 seconds. The timer waits while the pointer or focus is on the toast.
- An error (tone ruby) stays until dismissed: a failure is a persistent notice, never timed.
- Offer Undo in the action slot instead of asking first.
Processed 12 journeys
Success!!
Import
import { useKbToast } from "@/components/ui/KbToast";
const { toast, toastRegion } = useKbToast();
toast({ message: "Flow deleted", action: { label: "Undo delete", onClick: undo } });
// ...and render {toastRegion} once in the componentProps
| Prop | Type | Default | What it does |
|---|---|---|---|
toast(input) | string | None | Shows a toast and returns its id. |
input | message, tone?, action?, durationMs? | None | Copy, tone and an optional action. |
dismiss(id) | void | None | Removes one toast. |
Keyboard and screen readers
- The list is a polite live region present before the first toast, so additions are announced.
- Errors use role=alert. The dismiss button is named.
- Entry motion is removed under reduced motion.