Thành phần

Sonner

Toaster and toast() on Base UI Toast: paper and 1px ink rule at bottom-right, state by icon, rule or hatched band, never colour.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/sonner

Usage

Mount one Toaster near the root of the app, then call toast() from anywhere.

tsx

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

// Once, in the layout:
<Toaster closeLabel="Dismiss" labels={{ success: "Success", error: "Error", warning: "Warning", info: "Note" }} />

// Anywhere:
toast.success("Story published", {
  description: "It is now on the front page.",
  action: { label: "Undo", onClick: withdraw },
});

closeLabel is required so the close button is named in the reader's language. labels adds a hidden word that names each state for screen readers. toast() returns an id; pass the same id again to update a toast in place, or toast.dismiss(id) to close it. This is Base UI Toast under the upstream sonner names, so there is no sonner package to install; toast.promise and toast.loading are not provided.

States

State	Treatment
Default	Paper, 1px ink rule, no shadow
Success	Ink check icon
Error	2px ink left rule and an ink ✕; announced assertively
Warning	Hatched `tint-2` band across the top and an ink triangle
Info	`tint-1` panel and an ink info icon
Close pressed	`tint-1` fill on the 44px ✕; no hover effect

Keyboard

Key	Action
F6	Move focus into the toast region
Tab / Shift+Tab	Move between the toasts and their buttons
Enter / Space	Activate the focused action or close button
Esc	Close the focused toast

Timed toasts pause while the pointer is over them or focus is inside. New toasts are announced by the live region without moving focus.

Vietnamese

The toast's text, close name and state word travel with the toast, so one Toaster serves both languages on this page.

Ink adaptation

Upstream's rich colours, shadow, radius and overlapping stack are removed. Toasts are paper with a 1px ink rule in a plain column at the bottom-right; the state is shown by an icon, a 2px ink left rule or a hatched band, and named in hidden text. Built on Base UI Toast.