ObjectUIComponentsFeedback
Toast
Brief notification messages that appear temporarily
The Toast component displays brief notifications to users that appear temporarily and then disappear.
Basic Usage
Basic Toast
{
"type": "button",
"label": "Show Toast",
"onClick": {
"action": "toast",
"title": "Success",
"description": "Your changes have been saved."
}
}Variants
Default
{
"type": "button",
"label": "Default Toast",
"onClick": {
"action": "toast",
"title": "Notification",
"description": "This is a default toast message."
}
}Destructive
{
"type": "button",
"label": "Destructive Toast",
"variant": "destructive",
"onClick": {
"action": "toast",
"variant": "destructive",
"title": "Error",
"description": "Something went wrong."
}
}With Action
Toast with Action
{
"type": "button",
"label": "Show Toast with Action",
"onClick": {
"action": "toast",
"title": "Update Available",
"description": "A new version is available.",
"actionLabel": "Update Now"
}
}Schema
interface ToastSchema {
type: 'toast';
title?: string; // Toast title
description?: string; // Toast message
variant?: 'default' | 'destructive';
// Action
actionLabel?: string; // Action button label
onAction?: string | ActionConfig;
// Timing
duration?: number; // Auto-dismiss time in ms
}Examples
Success Message
Success Toast
{
"type": "button",
"label": "Save",
"onClick": {
"action": "toast",
"title": "Saved Successfully",
"description": "Your changes have been saved.",
"duration": 3000
}
}Error Message
Error Toast
{
"type": "button",
"label": "Submit",
"variant": "destructive",
"onClick": {
"action": "toast",
"variant": "destructive",
"title": "Submission Failed",
"description": "Please check your input and try again."
}
}With Undo Action
Toast with Undo
{
"type": "button",
"label": "Delete Item",
"onClick": {
"action": "toast",
"title": "Item Deleted",
"description": "The item has been removed.",
"actionLabel": "Undo"
}
}