ObjectUIComponentsFeedback
Sonner
Toast notifications using Sonner library
The Sonner component provides beautiful toast notifications with a rich API.
Basic Usage
A sonner node renders its own trigger button. Clicking the button raises the toast the
node declares, so the whole demo is one schema node with no handler to wire up.
buttonLabel and buttonVariant style that trigger; message, description and
variant describe the toast it raises.
Basic Sonner Toast
Toast Types
Success
Error
Warning
Info
With Description
description adds a secondary line under the message.
Message With Description
A sonner toast carrying both a message and a secondary description line.
Schema
interface SonnerSchema {
type: 'sonner';
message?: string; // Toast message
title?: string; // Alias for message
description?: string; // Additional description
variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
// Trigger button
buttonLabel?: string; // Trigger button text (default: 'Show Toast')
buttonVariant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
}Examples
Custom Trigger Button
Custom Trigger Button
A success toast whose trigger button is styled through buttonVariant.