Toast notification component for displaying brief, non-blocking messages to users.
| Name | Type | Default | Description |
|---|---|---|---|
| theme | "light" | "dark" | "system" | system | Toast theme that adapts to light/dark mode |
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | bottom-right | Position of toast notifications on screen |
| richColors | boolean | — | Enable rich colors for success/error states |
| closeButton | boolean | — | Show close button on all toasts |
| duration | number | 4000 | Default duration in milliseconds |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.background | var(--background) | Toast surface color | |
| Text | color.foreground | var(--foreground) | Toast text color | |
| Border | color.border | var(--border) | Toast border | |
| Description | color.muted-foreground | var(--muted-foreground) | Secondary text color | |
| Action Button | color.primary | var(--primary) | Action button background | |
| Action Text | color.primary-foreground | var(--primary-foreground) | Action button text | |
| Cancel Button | color.muted | var(--muted) | Cancel button background | |
| Shadow | shadow.lg | var(--shadow-lg) | Toast elevation |
Different toast variants for various message types.
toast('Default message')
toast.success('Changes saved!')
toast.error('Something went wrong')
toast.warning('Session expiring soon')
toast.info('New features available')
toast.loading('Processing...')Add detailed descriptions to toast messages.
toast.success('Profile updated', {
description: 'Your changes have been saved.',
})Add action and cancel buttons to toasts.
toast('Event created', {
action: {
label: 'Undo',
onClick: () => toast.info('Undone'),
},
cancel: {
label: 'Dismiss',
onClick: () => {},
},
})Automatically shows loading → success/error states based on promise resolution.
toast.promise(asyncOperation(), {
loading: 'Saving changes...',
success: 'All changes saved!',
error: 'Failed to save changes',
})Control how long toasts remain visible.
toast('Quick toast', { duration: 1000 })
toast('Long toast', { duration: 10000 })
toast('Persistent', { duration: Infinity, closeButton: true })Programmatically dismiss or update existing toasts.
const id = toast.loading('Processing...');
// Later...
toast.success('Done!', { id });
// Or dismiss all
toast.dismiss();