Source

Command Palette

Search for a command to run...

Sonner

Toast notification container for displaying messages to users.

About Sonner

A container component that displays toast notifications for user feedback and system messages. Based on the sonner library, it provides pre-styled notifications that appear temporarily on screen edges. The component automatically manages toast display, positioning, and dismissal with smooth animations.

Installation

Import the Sonner component from LSD:
import { Sonner } from '@nipsys/lsd'

export default function MyComponent() {
  return <Sonner />
}

Variants

Component variants for different visual styles and use cases.
Error

Info

Success

Warning

Features

Additional features and capabilities of the component.
Actions

Duration

Persistent

Position Simple

Promise Simple

Rich Content

API Reference

Sonner Documentation
Sonner wraps the sonner library and extends all its props
View Sonner documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Escape - Dismiss all visible toasts
ARIA Attributes
Proper ARIA attributes for screen readers
• Uses aria-live regions to announce toast messages to screen readers• Uses appropriate ARIA roles (alert or status) based on toast type
Focus States
Visible focus indicators for keyboard users
• Toasts do not receive keyboard focus as they are transient UI elements. Screen readers automatically announce new toasts when they appear. Users can dismiss all toasts with Escape regardless of current focus.
Card