Sonner

Feedback

Modern toast notification system with promise tracking, rich content support, and position configuration

Toast Notifications

Toast Types

Color Variants

Action Buttons

Loading States

Promise Handling

Persistent Toasts

Usage Guidelines

When to Use

  • Modern toast notifications
  • Promise-based notifications
  • Rich toasts

Accessibility

  • Live region announcements
  • Actions keyboard accessible

Performance

  • Efficient stacking
  • Promise-based lifecycle

Common Mistakes

  • Promise toast without all states
  • Too many simultaneous toasts

Frequently Asked Questions

Sonner is a modern toast system with promise tracking, rich content, and stacking support.
Yes, Sonner can show loading/success/error based on promise state.

View on GitHub

See the full source code on GitHub

Related Components

View all
Alert

Contextual messaging with severity variants, dismissal, icons, and action button integration

Backdrop

Backdrop overlay for modals with blur effects and click-to-close functionality

Progress

Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients

Result

Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons

Previous

Steps

Next

SpeedDial