Toast

Non-blocking notification messages that appear briefly and dismiss automatically.

When To Use

Use Toast when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

Do not use Toast just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Use semantic status text in addition to color or icon treatment so the message is understandable to everyone.
Announce transient updates with a live region when the user does not move focus to the message directly.
Keep dismissal and recovery actions accessible from the keyboard.

Composition surface

Toast keeps the native HTML or Radix API surface, then layers in design-system styling and composition defaults.

import { toast } from "sonner"

// Toaster is already in the root layout
toast("Event has been created")

Default

Basic toast — Toaster is configured once in the root layout

With description

Supporting text below the title

Success

Positive confirmation

Error

Error or failure state

Warning

Cautionary message

With action

Inline action button — e.g. undo

Promise

Automatically transitions through loading → success / error