Toast
Transient, non-blocking feedback that an action landed, fired from anywhere with the useToast() hook.
import from ~/components/ui/toast
Variants
variant
Five intents: default, success, warning, destructive, info. Each pulls its accent from the palette, so a brand change reskins all five.
Duration
duration
Milliseconds before auto-dismiss, 4000 by default. Pass 0 to keep the toast until the user closes it.
Stacking
stack
The provider owns one column bottom-right. Toasts queue in it rather than overlapping, and each carries its own dismiss button.
Rules
Do
Confirm that an action landed, without interrupting what the user is doing.
Match the variant to the severity, and keep the title to a few words.
Leave enough time to read. Raise duration for a longer message, or pass 0 and let the user close it.
Mount ToastProvider once, at the root, and reach it from anywhere with useToast().
Don't
Do not carry a critical error in a toast alone. It disappears, so state it inline as well.
Do not ask for a decision in a toast. Anything with a choice belongs in a dialog.
Do not put a link or a form inside one. It can time out before a keyboard user reaches it.
Do not fire a toast per item in a loop. Summarise the batch in one message.