Components
YA Sonner
Toast notification component built on Sonner with semantic variants for feedback messages
The YaSonner is the toast notification component of the YaVendio Design System. Built on top of Sonner, it provides semantic variants for different types of feedback: default, success, info, warning, and error/destructive.
Styling approach:
defaultanderrortoasts use custom YaVendio design tokens from Figmasuccess,info, andwarningtoasts use Sonner'srichColors(enabled by default)
Supports customizable title, description, action buttons, and close button on hover.
Quick Start
pnpm dlx shadcn@latest add @yavendio/ya-sonnernpx shadcn@latest add @yavendio/ya-sonneryarn dlx shadcn@latest add @yavendio/ya-sonnerAdd the YaSonner component to your root layout:
import { YaSonner } from '@/components/ui/ya-sonner'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<YaSonner />
</body>
</html>
)
}Then use the toast function anywhere in your app:
import { toast } from '@/components/ui/ya-sonner'
export default function Example() {
return (
<button onClick={() => toast('Event created successfully')}>
Show Toast
</button>
)
}Toast Types
Five semantic variants for different types of feedback.
| Type | Usage | Colors | Styling |
|---|---|---|---|
default | General messages | Stone (neutral) | YaVendio tokens |
success | Confirmations, completions | Green | Sonner richColors |
info | Informational notices | Blue | Sonner richColors |
warning | Warnings, cautions | Orange | Sonner richColors |
error | Errors, failures | Destructive (red) | YaVendio tokens |
import { toast } from '@/components/ui/ya-sonner'
// Default toast
toast('Default message')
// Success
toast.success('Changes saved!')
// Info
toast.info('Important information')
// Warning
toast.warning('Warning')
// Error/Destructive
toast.error('Something went wrong')With Title and Description
Add context with a title and description.
toast('Are you absolutely sure?', {
description: 'This action cannot be undone.',
})With Action
Add an action button for user interaction.
toast('Event has been created', {
description: 'Sunday, December 3, 2023 at 9:00 AM',
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
})Destructive
For error states and critical failures.
toast.error('Uh oh! Something went wrong.', {
description: 'There was a problem with your request.',
action: {
label: 'Retry',
onClick: () => retryOperation(),
},
})Promise
Show loading, success, and error states for async operations.
toast.promise(saveChanges(), {
loading: 'Saving...',
success: (data) => `${data.name} has been saved`,
error: 'Error saving changes',
})All Variants
Complete overview of all toast types with actions.
Positioning
Control where toasts appear on screen.
<YaSonner position="top-left" />
<YaSonner position="top-center" />
<YaSonner position="top-right" />
<YaSonner position="bottom-left" />
<YaSonner position="bottom-center" />
<YaSonner position="bottom-right" /> {/* Default */}Dismissing Toasts
// Dismiss a specific toast
const toastId = toast('Loading...')
toast.dismiss(toastId)
// Dismiss all toasts
toast.dismiss()Duration
Control how long toasts are displayed.
// Custom duration (milliseconds)
toast('Quick message', { duration: 2000 })
// Infinite (user must dismiss)
toast('Important!', { duration: Infinity })Props
YaSonner (Toaster)
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' | Toast position |
expand | boolean | false | Expand toasts by default |
richColors | boolean | true | Use rich colors for success/info/warning variants |
closeButton | boolean | false | Show close button by default |
duration | number | 4000 | Default duration in ms |
className | string | - | Additional classes |
toast() Options
| Option | Type | Description |
|---|---|---|
description | string | ReactNode | Secondary text |
action | { label: string; onClick: () => void } | Action button |
cancel | { label: string; onClick?: () => void } | Cancel button |
duration | number | Override default duration |
icon | ReactNode | Custom icon |
id | string | number | Custom toast ID |
Accessibility
Best Practices
| Do | Don't |
|---|---|
| Use appropriate semantic type for context | Use error type for non-error messages |
| Keep messages concise and actionable | Long paragraphs in toast descriptions |
| Provide undo actions for destructive operations | Silent deletions without feedback |
| Use promise toasts for async operations | Leave users without loading feedback |
| Position toasts away from critical UI | Toasts blocking important content |