Loading…

Toast

Brief, non-blocking messages with an imperative API callable from anywhere.

Feedback
2 files
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add toast

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ToastProvider } from "@/components/ui/toast";

Examples

Every example the tests run, live and operable, side by side.

Default
Variants
With Description
With Action
Persistent
Promise
Stacking
Spring

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Toast>

Prop	Type	Default
`animation` How the toast enters. `default` slides in from off-screen. `spring` hops a short way in from the docked edge with a scale pop and a slight overshoot. Both leave, and swipe away, the same way. Stops under reduced motion.	`"default" \| "spring"`	`"default"`
`variant`	`"default" \| "success" \| "warning" \| "destructive" \| "info"`	`"default"`

Every prop of Radix UI’s Toast.Root, plus className.

<ToastTitle>

Every prop of Radix UI’s Toast.Title, plus className.

<ToastDescription>

Every prop of Radix UI’s Toast.Description, plus className.

<ToastAction>

Every prop of Radix UI’s Toast.Action, plus className.

<ToastClose>

Every prop of Radix UI’s Toast.Close, plus className.

<Toaster>

Prop	Type	Default
`animation` How toasts enter. See `Toast`'s `animation`.	`"default" \| "spring"`	`"default"`
`duration` Default auto-dismiss in ms. Individual toasts may override it.	`number`	`DEFAULT_TOAST_DURATION`
`label` Names the toast region for assistive technology.	`string`	`"Notifications"`
`position`	`ToastPosition`	`"bottom-right"`
`className`	`string`	—

Accessibility

Toasts are announced through a live region: destructive and warning variants interrupt (foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, focus and window blur, and F8 moves focus into the toast list from anywhere. An action must carry altText describing how to do the same thing without the toast, since it may be gone before a screen reader user reaches it. The optional spring entrance stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

animation

How the toast enters. default slides in from off-screen. spring hops a short way in from the docked edge with a scale pop and a slight overshoot. Both leave, and swipe away, the same way. Stops under reduced motion.

"default" | "spring"

"default"

variant

"default" | "success" | "warning" | "destructive" | "info"

"default"

Prop

Type

Default

animation

How toasts enter. See Toast's animation.

"default" | "spring"

"default"

duration

Default auto-dismiss in ms. Individual toasts may override it.

number

DEFAULT_TOAST_DURATION

label

Names the toast region for assistive technology.

string

"Notifications"

position

ToastPosition

"bottom-right"

className

string

—