Toast
Notification toasts
Examples
Interactive Demo
Click buttons to trigger different toast types.
html
Positions
Toast can appear in different screen positions.
html
Usage
Cleopatra - Modern Admin Dashboard
// Simple toast
toast.show({ title: 'Hello!', description: 'This is a toast.' });
// With variant
toast.success({ title: 'Saved!', description: 'Changes saved.' });
toast.error({ title: 'Error', description: 'Something failed.' });
toast.warning({ title: 'Warning', description: 'Be careful!' });
toast.info({ title: 'Info', description: 'FYI...' });
// With options
showToast({
title: 'Custom',
description: 'With custom options',
variant: 'success',
position: 'bottom-right',
duration: 3000,
closable: true
});
Options
| Option | Type | Default |
|---|---|---|
| title | string | '' |
| description | string | '' |
| variant | default | success | warning | destructive | info | 'default' |
| position | top-right | top-left | bottom-right | etc. | 'top-right' |
| duration | number (ms) | 5000 |