Sonner

Sonner – a React toast component with built-in conventions and sensible defaults.

sonner lucide-react

1'use client'
2
3import { toast } from 'sonner'
4
5import { Button } from '@/components/ui/button'
6
7export function SonnerDemo() {
8    return (
9        <Button
10            variant="outline"
11            onClick={() =>
12                toast('Event has been created', {
13                    description: 'Sunday, November 02, 2025 at 9:00 AM',
14                    action: {
15                        label: 'Undo',
16                        onClick: () => console.log('Undo'),
17                    },
18                })
19            }
20        >
21            Show Toast
22        </Button>
23    )
24}
25

Installation

Install the following dependencies:

npx shadcn@latest add https://sbthemes.com/r/sonner.json

Examples

Toast Type

Showcases different types of toast notifications such as success, error, warning, info, and promise-based toasts. Use these to provide instant feedback to users based on actions or system events.

1'use client'
2
3import { toast } from 'sonner'
4
5import { Button } from '@/components/ui/button'
6
7export function SonnerToastType() {
8    return (
9        <div className="flex flex-wrap justify-center gap-3">
10            <Button
11                variant={'outline'}
12                onClick={() =>
13                    toast.success('Your changes have been saved.', { richColors: true })
14                }
15            >
16                Success
17            </Button>
18            <Button
19                variant={'outline'}
20                onClick={() =>
21                    toast.error('Please try again later.', { richColors: true })
22                }
23            >
24                Error
25            </Button>
26            <Button
27                variant={'outline'}
28                onClick={() =>
29                    toast.warning(
30                        'Event start time cannot be earlier than 8am',
31                        {
32                            richColors: true,
33                        },
34                    )
35                }
36            >
37                Warning
38            </Button>
39            <Button
40                variant={'outline'}
41                onClick={() =>
42                    toast.info('New update available.', { richColors: true })
43                }
44            >
45                Info
46            </Button>
47            <Button
48                variant={'outline'}
49                onClick={() =>
50                    toast.promise(
51                        new Promise((resolve) => setTimeout(resolve, 2000)),
52                        {
53                            loading: 'Processing your request...',
54                            success: 'Saved successfully!',
55                            error: 'Something went wrong.',
56                        },
57                    )
58                }
59            >
60                Promise Toast
61            </Button>
62        </div>
63    )
64}
65

Toast Position

Demonstrates how toast notifications can appear in various screen positions like top-center, bottom-right, or top-left. Useful for aligning toast placement with your app’s layout or design preferences.

1'use client'
2
3import { toast } from 'sonner'
4
5import { Button } from '@/components/ui/button'
6
7export function SonnerToastPosition() {
8    return (
9        <div className="flex max-w-lg flex-wrap justify-center gap-3">
10            <Button
11                variant="outline"
12                onClick={() =>
13                    toast('👋 Hey there! Good to see you.', {
14                        position: 'top-left',
15                    })
16                }
17            >
18                Top Left
19            </Button>
20            <Button
21                variant="outline"
22                onClick={() =>
23                    toast('✅ Your settings have been saved!', {
24                        position: 'top-center',
25                    })
26                }
27            >
28                Top Center
29            </Button>
30            <Button
31                variant="outline"
32                onClick={() =>
33                    toast('🎉 Everything worked perfectly!', {
34                        position: 'top-right',
35                    })
36                }
37            >
38                Top Right
39            </Button>
40            <Button
41                variant="outline"
42                onClick={() =>
43                    toast('💾 We’ve saved your progress.', {
44                        position: 'bottom-left',
45                    })
46                }
47            >
48                Bottom Left
49            </Button>
50            <Button
51                variant="outline"
52                onClick={() =>
53                    toast('🔔 You’ve got something new!', {
54                        position: 'bottom-center',
55                    })
56                }
57            >
58                Bottom Center
59            </Button>
60            <Button
61                variant="outline"
62                onClick={() =>
63                    toast('✨ All done — nice and easy!', {
64                        position: 'bottom-right',
65                    })
66                }
67            >
68                Bottom Right
69            </Button>
70        </div>
71    )
72}
73

API Reference

Toaster

Prop	Type	Default
position	`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`	-
closeButton	`boolean`	false
duration	`number`	4000
visibleToasts	`number`	3
toastOptions	`ToastOptions`	-
icons	`Success`,`Error`,`Warning`,`Info`,`Loading`	-

On This Page