Docs/Sonner

Sonner

Stackable toast notification system with multiple variants and positions.

Usage

tsx

1import { SonnerProvider, useSonner } from '@storm-ds/ui'
2
3function App() {
4  const { toast } = useSonner()
5  return <button onClick={() => toast('Hello!')}>Notify</button>
6}
7
8export default function Page() {
9  return <SonnerProvider><App /></SonnerProvider>
10}

Basic Toast

tsx

1const { toast } = useSonner()
2
3<Button onClick={() => toast('Message sent!')}>Show Toast</Button>

Variants

tsx

1const { toast } = useSonner()
2
3<div className="space-y-2">
4  <Button onClick={() => toast('Success!', { variant: 'success' })}>Success</Button>
5  <Button onClick={() => toast('Error!', { variant: 'error' })}>Error</Button>
6  <Button onClick={() => toast('Warning!', { variant: 'warning' })}>Warning</Button>
7</div>

Positions

tsx

1<SonnerProvider position="top-right">
2  <App />
3</SonnerProvider>
4
5<SonnerProvider position="bottom-center">
6  <App />
7</SonnerProvider>

With Duration

tsx

1const { toast } = useSonner()
2
3<Button onClick={() => toast('Auto closes', { duration: 2000 })}>2s Toast</Button>
4<Button onClick={() => toast('Stays', { duration: Infinity })}>Persistent</Button>

With Action

tsx

1const { toast } = useSonner()
2
3<Button onClick={() => toast('Undo action?', { action: { label: 'Undo', onClick: () => {} } })}>Show Action</Button>

Props

Prop	Type	Default	Description
position	'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'	'bottom-right'	Toast position
variant	'default' \| 'success' \| 'error' \| 'warning' \| 'info'	'default'	Toast style
duration	number	3000	Milliseconds before auto-dismiss (Infinity for persistent)
action	{ label: string; onClick: () => void }	-	Optional action button
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Sonner toast system. Import: `import { SonnerProvider, useSonner } from '@storm-ds/ui'`. Mark with 'use client'. Sub-components: SonnerProvider (wraps app, sets defaults), useSonner (hook for toast() function), SonnerToaster (displays toasts). SonnerProvider props: position (top/bottom, left/center/right), variant (style). useSonner returns toast(message, options) function. Options: variant (default/success/error/warning/info), duration (ms), action ({label, onClick}). Stacks multiple toasts. Auto-dismisses based on duration. Use for success/error feedback, notifications, confirmations. Example: `<SonnerProvider><App /></SonnerProvider>`, `const {toast} = useSonner(); toast('Success!')`, `toast('Error', {variant: 'error'})`, `toast('Undo?', {action: {label: 'Undo', onClick}})`

Toast

Tooltip