Toast

Playground

Every kind of toast. Each setting answers with a toast.

Position

Style

StackSound

Status

Progress

Content

Actions

Import the parts you need from the component's folder.

ts

import { Toaster, toast } from "@/components/ui/toast";

Call toast from a click.

Errors close after 8 seconds, the rest after 5. Loading toasts and toasts with a button stay.

A second line under the title.

A loading toast that morphs into the result.

Every call returns an id. Pass it to toast.update.

Return a patch from onClick to morph the toast, or nothing to close it.

Inverted against the page: dark on light, light on dark. Pass theme to pin one.

The engine is our own copy of Ding. index.ts holds the two lines that put vue-sonner back.

Prop	Type	Default	Description
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"top-center"`	Where the toast sits.
`theme`	`"light" \| "dark" \| "system"`	`inverse of the page`	Pin a theme instead of inverting against the app's color mode.
`labels`	`{ region?: string, dismiss?: string }`	`English`	Accessible names of the notifications region and the close button.
`nonce`	`string`	—	CSP nonce for the injected stylesheet, for pages that block inline styles.

Prop	Type	Default	Description
`title`	`string`	—	First argument. The text of the toast.
`description`	`string`	—	Second line under the title.
`action`	`{ label: string, onClick: () => void \| ToastPatch }`	—	Button on the toast. A toast with one stays until dismissed.
`secondary`	`{ label: string, onClick: () => void \| ToastPatch }`	—	Second button beside the action.
`image`	`string`	—	Avatar or thumbnail URL, shown in place of the status icon.
`meta`	`string`	—	Small trailing text beside the title, such as a timestamp.
`progress`	`number`	—	0 to 1. Draws a thin bar inside the toast.
`duration`	`number`	`5000`	Milliseconds before it closes. 0 keeps it until dismissed.
`id`	`string \| number`	—	Your own id, to update or dismiss the toast later.
`className`	`string`	—	Extra class on this one toast. Style it as .tst.your-class.

Method	Description
`toast.success / error / warning / info / loading(title, options?)`	Show a toast of that type. Returns its id.
`toast.promise(promise, { loading, success, error })`	Loading toast that morphs into the result.
`toast.update(id, patch)`	Change a live toast in place.
`toast.dismiss(id?)`	Close one toast, or all of them.
`toast.configure({ position, theme, labels, sound, volume, stack })`	Change the global toaster at runtime.