ObjectUIToast
Brief notification messages that appear temporarily
The Toast component displays brief notifications to users that appear temporarily and then disappear.
Basic Usage
A toast node renders its own trigger button. Clicking the button raises the toast the
node declares — the title, description, variant and duration are all read off the node
itself, so the whole demo is one schema node with no handler to wire up.
Basic Toast
Variants
variant selects the toast style. ToastSchema declares exactly five members —
default, success, warning, error and info; the four below plus success,
which the Success Message example uses.
Default
Error Variant
The 'error' toast variant. 'destructive' is a button variant, not a toast variant.
Info Variant
The 'info' toast variant, used here for an update notice.
Warning Variant
The 'warning' toast variant, used here for a deletion notice.
Schema
interface ToastSchema {
type: 'toast';
title?: string; // Toast title
description?: string; // Toast message
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
// Action button
action?: {
label: string;
onClick: () => void;
};
// Timing
duration?: number; // Auto-dismiss time in ms
}