Shadcn Sonner

Q: How do I add an action button to a Sonner toast?

Pass an `action` prop (object with `label` and `onClick`) to the toast call. For example, `toast.success('Deleted', { action: { label: 'Undo', onClick: () => restore() } })`.

Q: Can I customize the toast duration or auto-dismiss behavior?

Yes. Pass `duration` (milliseconds) to control how long before auto-dismiss. Set `duration: Infinity` to disable auto-dismiss and let the user close only via the button or action.

Browse 21 production-ready shadcn sonner toast components for success notifications, error alerts, and loading feedback. Sonner wraps the Sonner toast library with Radix UI accessibility and Shadcn Create style compatibility.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Brief feedback after an action, such as a created event or an archived message with Undo
Progress of async work in one toast that updates in place, from loading to success or failure
Rich notifications for messages, invites, deploys, builds and integrations, with their own buttons

When not to use

A status or warning that must stay on the page until the problem is fixed: use the Alert component
A choice the user has to make before the page can carry on: use the Alert Dialog component
An inbox panel that lists past activity for the user to review on demand: use the Sheet blocks

Agent notes

The examples ship only the sonner package and never render Toaster; mount the shadcn sonner Toaster once near your app root or no toast shows

Third-party API docs

Sonner v2: API reference, docs

Markdownhttps://web.dev.reui.io/components/sonner.md

MCPget_component("sonner")

Installnpx shadcn@latest add sonner

Full index for agents:llms.txtReUI MCP setup

Shadcn Sonner: Toast Notifications for React

Shadcn Sonner wraps the opinionated Sonner toast library, a modern notification primitive for React that auto-dismisses after a timeout or user interaction. It follows Radix UI accessibility conventions so screen readers announce toasts and users can interact with actions before the notification disappears.

Import the Toaster once in your root layout and use import { toast } from 'sonner' in your client components to trigger notifications. Sonner Shadcn Create style options ensure toasts respect your design tokens for color, radius, and typography.

ReUI lists sonner components inside forms, data tables, and workflow dashboards so you evaluate timing, action placement, and variant usage next to real product layouts. The sections below explain what it is, why teams use it, which features matter, and how it integrates with other components.

What is Shadcn Sonner?

A toast is a transient notification that appears briefly in a fixed corner (usually bottom-right), delivers a status or action, and auto-dismisses or lets the user close it. Shadcn Sonner is built on the Sonner library and manages focus, keyboard navigation, and live region announcements so toasts feel native to the page.

Components here show success, error, loading, and info toasts with optional actions (undo, retry, view details). They help you decide which toast variant fits your feedback need and how to pair toasts with forms, buttons, and async operations without notification fatigue.

Why Use Shadcn Sonner?

Teams use toasts for non-blocking feedback: form submissions, file uploads, bulk operations, and temporary errors that don't need a modal or overlay. Toasts keep users on task by delivering feedback without stealing focus or requiring a button click to dismiss.

The workflows on this page show when to use toasts versus Shadcn Alert (persistent) or Shadcn Dialog (blocking).

Shadcn Sonner Features

Sonner Library Foundation. Built on Sonner (import { toast } from 'sonner'), a battle-tested toast system for React and Next.js with great TypeScript support.
Success, Error, Loading, and Info Variants. Four semantic types so users instantly recognize outcome. Error toasts may auto-dismiss slower to let users read the message.
Actions and Links. Add an action button ('Undo', 'Retry') or link inside the toast so users can respond without losing context or navigating away.
Auto-dismiss and Manual Close. Toasts auto-dismiss after a timeout or let users dismiss on demand. Control duration and whether users can close or only actions trigger dismissal.
Accessible Announcements. Live regions and ARIA attributes announce toasts to screen readers; keyboard users can tab to actions and close buttons.

Pair toasts with Shadcn Button form submissions so the click triggers an async action and a toast confirms success or shows an error.

Use toasts with Shadcn Data Grid or Shadcn Card for bulk operations (delete rows, archive items) so feedback is instant and non-blocking.

Combine toasts with Shadcn Dialog for workflows where the dialog completes a task and the toast confirms the outcome (e.g., save dialog, then success toast).

Frequently Asked Questions

How do I use `sonner` toast in my React component?

Install with shadcn CLI, add the Toaster to your root layout, then import and call toast.success('Message'), toast.error(), or other variants from your client component. Pass a message string and optional action object with label and onClick handler.

Should I use a toast or a persistent alert?

Use toasts for transient feedback: form submissions, file uploads, quick confirmations. Use Shadcn Alert for persistent warnings that users should see on every visit (e.g., billing problems). Use Shadcn Dialog for decisions that require user action before continuing.

How do I add an action button to a Sonner toast?

Pass an action prop (object with label and onClick) to the toast call. For example, toast.success('Deleted', { action: { label: 'Undo', onClick: () => restore() } }).

Can I customize the toast duration or auto-dismiss behavior?

Yes. Pass duration (milliseconds) to control how long before auto-dismiss. Set duration: Infinity to disable auto-dismiss and let the user close only via the button or action.

Is Sonner toast accessible to screen readers?

Yes. Sonner uses live regions and semantic markup so screen readers announce the toast message and any available actions. Test with a screen reader to confirm your toast message is clear.

How do I trigger a toast from a form submission or API call?

Call the toast function in your onSuccess or onError callback (from React Query, SWR, or a try/catch). For example, after a successful mutation, call toast.success('Saved!'). Pair toasts with form validation and Shadcn Field errors for complete feedback.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.