Skip to content
Design System
Contact

Toast

Non-blocking feedback for success, errors, pending work and undo.

Componentssonner

Playground

Toasts confirm what just happened and offer a way back. They stack bottom-right, pause while hovered or focused, and never ask a question the user must answer.

Preview

Invoice sent

Acme Corporation will get it by email.

Undo

Props

Type
Duration
example.tsxtsx
1import { toast } from "sonner"
2
3toast.success("Invoice sent", {
4  description: "Acme Corporation will get it by email.",
5  action: { label: "Undo", onClick: () => undo() },
6})

States

Each moment of a toast, drawn in place with the same surface as the live ones.

States

  • Draft saved

    Northwind portal, just now.

    Defaultrest

  • Invoice sent

    Timer paused while hovered.

    Hover:hover pauses timer

  • Invoice sent

    Alt+T moves focus here.

    Focus:focus-visible

  • Uploading 3 files…

    You can keep working.

    Loadingaria-busy

  • Project archived

    Undo expired after 10 seconds.

    Disabledaction disabled

  • Couldn’t send the invoice

    The email bounced. Check the billing address.

    Errortoast.error

  • 3 files uploaded

    Added to Northwind portal.

    Successtoast.success

Examples

Every type, a loading toast that turns into success, toast.promise with a result you pick, a custom rich toast, and an Undo that really restores the deleted file.

Types
Loading, then success (same id)
toast.promise
Request result
Rich and described
Undo a delete
  • Proposal v3.pdf
  • Pricing model.xlsx
  • Kickoff notes.md
  • Logo pack.zip

API

sonner. The Toaster is mounted once in the app shell at bottom-right; call toast() from anywhere.

PropTypeDefaultDescription
toast(title, options)(ReactNode, ExternalToast) => id—Plain toast. Also toast.success, .error, .warning, .info and .loading.
descriptionReactNode—Second line in muted text. Say what happened to what.
durationnumber4000Milliseconds before it closes. Infinity keeps it until dismissed; add closeButton then.
action / cancel{ label, onClick }—One action button, usually Undo or Retry, and an optional cancel.
idstring | number—Pass the id from toast.loading() to update that toast in place.
toast.promise(promise, { loading, success, error })—Shows loading, then success or error when the promise settles.
toast.custom(id => ReactElement, options)—Render your own markup. Call toast.dismiss(id) from its buttons.
toast.dismiss(id?) => void—Close one toast, or all of them without an id.

Accessibility

Keyboard

Move focus to the toast region
Alt+T
Reach the action and close buttons
Tab
Dismiss the focused toast
Esc

Semantics and ARIA

  • The toast region is an aria-live="polite" landmark labelled “Notifications alt+T”, so new toasts are announced after the current speech without stealing focus.
  • Errors that block progress belong inline with role="alert" (assertive). An error toast is a summary on top of that, never the only place the error appears.
  • Timers pause while a toast is hovered or focused, and the window losing focus pauses them too, so there is time to reach Undo.
  • Don’t put critical-only information or the only path to an action in a toast: it disappears. Undo must also be possible from the page or history.
  • Action labels are verbs (Undo, Retry, Reply). Loading toasts say what is happening and that the user can keep working.