Feedback

Toast

Transient status messages with actions, themed by the Aback tokens.

BetaNew shared patternRegistry JSON

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add toast

Writes components/ui/toaster.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Toast. Native element props pass through.

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "system"`	"system"	Pass the app's resolved theme when the theme is a class rather than the OS preference.
`position`	`"top-right" \| "top-left" \| "bottom-right" \| "bottom-left" \| "top-center" \| "bottom-center"`	"top-right"	Where the stack appears. Top right keeps it clear of the content being read.
`closeButton / richColors / offset`	`boolean / boolean / number \| object`	true / true / 16	The close control, status tinting, and the gap from the viewport edge or a sticky header.
`toast(message, options)`	`(message: ReactNode, options?: ToastOptions) => string`	None	Shows a neutral toast and returns its id. Options include description, action, cancel, duration, and id.
`toast.success / error / warning / info`	`same signature as toast`	None	Status variants. They use the same soft/strong token pairs as Alert, in both themes.
`toast.dismiss(id?)`	`(id?: string) => void`	None	Dismisses one toast, or every toast when no id is given. Use it before a navigation that would otherwise leave a stale message.
`action.label / onClick`	`string / () => void`	—	A single reversible action, such as Undo. The toast dismisses after it runs unless you pass `duration: Infinity`.

Dependencies: @tabler/icons-react, sonner, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Toasts are announced through a polite live region. Do not use one for a validation error: put the message next to the field so it is read in context and remains on screen.
The close button and the action are real, focusable buttons. They are the only interactive parts; the rest of the toast is not a link.
Never make a toast the only way to reach essential information or the only confirmation that data was saved. Pair it with a persistent state on the page.
Use duration: Infinity when the message contains an action the person may need time to consider, and let them dismiss it explicitly.
Emit one toast per outcome. Repeating the same message on every render creates a stream of announcements.
The status colour is never the only signal: every variant also has an icon and a title that names the outcome.
Motion is suppressed when the visitor requests reduced motion.

Key	Action
`Tab`	Move focus to the action and close buttons while the toast is visible.
`Enter`or`Space`	Run the focused action or dismiss the toast.
`Alt`+`T`	Move focus into the toast region (sonner's default hotkey).
`Escape`	Dismiss the focused toast.

Mount <Toaster /> once in the root layout — not on each page — then import toast from the same module anywhere, including plain event handlers.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.