Installation
Usage
"use client"
import { toast, Toaster } from "@/components/toaster"
export function SaveButton() {
return (
<>
<button onClick={() => toast.success("Saved", { description: "All changes are live." })}>Save</button>
<Toaster position="bottom-right" />
</>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| toast(title, options?) | function | — | Show a toast; returns its id. Options: description, variant, duration (ms, Infinity to stay), action and cancel { label, onClick }, id (update in place), onDismiss, onAutoClose. |
| toast.success / .info / .warning / .error / .loading | function | — | Shortcuts for each variant. |
| toast.promise(promise, messages) | function | — | Loading, then success or error, in one toast. |
| toast.dismiss(id?) | function | — | Dismiss one toast, or all. |
| position | "top-left" … "bottom-right" | "bottom-right" | Where the stack sits (Toaster prop). |
| visible | number | 3 | Toasts shown in the collapsed stack. |
| gap | number | 12 | Space between expanded toasts, in px. |
| progress | boolean | true | A thin bar showing each toast's time left; it pauses with the timer. |
| richColors | boolean | false | Tint each toast with its status colour, not just its icon. |
| hotkey | string | "alt+t" | Moves focus to the toasts. |
Accessibility
- Announced through dedicated live regions: errors assertively, everything else politely.
- The visible list is a labelled region you can reach with Alt+T; every toast has a Dismiss button and Escape dismisses the focused one.
- The same message sent again is announced again with its count ("(2 times)"), not stacked.
- Timers pause while you hover or focus the stack and while the tab is hidden.
- Stacked toasts out of view are inert; slides, pops and the time bar are removed under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.