Build · New

Toast

Confirms what just happened without stopping anyone. Add one action, like Undo or Retry, and it becomes a snackbar.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/toast

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

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

// Once, in the root layout:
<Toaster />

// Anywhere:
toast({ message: "Card removed", action: { label: "Undo", onClick: restoreCard } });

Examples

Undo

The card goes at once, and Undo brings it back. A toast with an action stays until it's used or dismissed, so the chance isn't lost.

Types

Toast renders the look alone, without a timer. Default for most confirmations; Success, Error and Warning when the outcome matters; Brand rarely. Warning keeps its light colors in dark mode.

API reference

toast()

Prop	Type	Default	Description
`message`	`string`		Figma's Message: what happened, in one line; it's what screen readers announce.
`type`	`"default" \| "brand" \| "success" \| "error" \| "warning"`	`"default"`	Figma's Type. Errors are announced urgently.
`action`	`{ label: string; onClick: () => void }`		Figma's Show action: one action; it keeps the toast on screen.
`icon`	`IconComponent \| null`		Figma's Leading icon; `null` hides it.
`dismiss`	`boolean`	`true`	Figma's Show dismiss.
`timeout`	`number`	`5000 / 0`	Milliseconds; 0 (stays) when there's an action.
`toast.dismiss(id?)`	`function`		Closes one toast, or all of them.

Toaster

Prop	Type	Default	Description
`offset`	`string`		Extra space below the toasts on phones, to clear a navigation bar.

Toast

Prop	Type	Default	Description
`message / type / icon`	`ReactNode / ToastType / IconComponent \| null`		The look alone, for static use.
`action / dismiss`	`ReactNode`		`ToastActionButton` and `ToastDismissButton`.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the action and the dismiss button; focus never jumps to a toast on its own.

ARIA

Toasts are announced politely (status), errors urgently (alert), and focus stays where it is.
The timer pauses on hover and focus, and a toast with an action never disappears on its own.
The dismiss button has a name (Dismiss); an error isn't shown by color alone: the message says it.

Arabic and RTL notes

Mirrors

The icon and message sit on the right; the action and dismiss button on the left.
On larger screens they appear at the bottom inline end: the bottom left.
Each toast takes the direction and language of where it was triggered.

Does not mirror

Toasts slide in and swipe away vertically in both languages.

Numerals: Amounts in the message follow the numerals setting and read left to right.
Arabic typography: The message is body-14 Medium, one line; the toast is at least 48px tall.
Mixed-direction text: Keep the Arabic message as short as the English: “أُزيلت البطاقة”.

All components ›