Toast
Short, non-blocking feedback from a global queue. Call toast() from anywhere and mount one <Toaster /> near the root of
your layout.
Examples
Tones
Show code
<Button onclick={() => toast({ title: "Saved", tone: "success" })}>Save</Button>
<Toaster />Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The bold first line. |
description | string | — | Optional supporting line. |
tone | "info" | "success" | "warning" | "danger" | "info" | Colors the dot and picks role=alert for warning and danger. |
duration | number | 5000 | Milliseconds before it dismisses itself; 0 keeps it on screen. |
toast(options) returns an id and stacks newest last; dismiss(id) closes one early. The region is labelled
"Notifications" and sits in the bottom-end corner, above the safe area.
Hovering a toast pauses its countdown. Mount a single Toaster — not one per page.