ObjectUIComponentsFeedback
Sonner
Toast notifications using Sonner library
The Sonner component provides beautiful toast notifications with a rich API.
Basic Usage
Basic Sonner Toast
{
"type": "button",
"label": "Show Sonner Toast",
"onClick": {
"action": "sonner",
"message": "Event has been created"
}
}Toast Types
Success
{
"type": "button",
"label": "Success",
"onClick": {
"action": "sonner",
"type": "success",
"message": "Operation completed successfully"
}
}Error
{
"type": "button",
"label": "Error",
"variant": "destructive",
"onClick": {
"action": "sonner",
"type": "error",
"message": "Something went wrong"
}
}Warning
{
"type": "button",
"label": "Warning",
"onClick": {
"action": "sonner",
"type": "warning",
"message": "Please review your input"
}
}Info
{
"type": "button",
"label": "Info",
"onClick": {
"action": "sonner",
"type": "info",
"message": "New update available"
}
}With Action
Toast with Action
{
"type": "button",
"label": "Show with Action",
"onClick": {
"action": {
"label": "View",
"onClick": "viewFile"
},
"message": "File uploaded",
"description": "Your file has been uploaded successfully"
}
}Schema
interface SonnerSchema {
action: 'sonner';
message: string; // Toast message
description?: string; // Additional description
type?: 'default' | 'success' | 'error' | 'warning' | 'info';
duration?: number; // Auto-close duration (ms)
// Action
action?: {
label: string;
onClick: string | ActionConfig;
};
}Examples
Promise Toast
Promise-based Toast
{
"type": "button",
"label": "Save Changes",
"onClick": {
"action": "sonner",
"type": "promise",
"loading": "Saving changes...",
"success": "Changes saved!",
"error": "Failed to save changes"
}
}