Components
Toast
Notifications that spring up into a stack, fan out on hover and can be flicked away.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Toaster, toast } from '@vizzele/react';
// once, at the root
<Toaster position="bottom-right" />
toast('Saved');
toast.success({ title: 'Deployed', description: 'vizzele-ui is live' });
toast.error({ title: 'Build failed', action: { label: 'Retry', onClick: retry } });Props
| Prop | Type | Default | Description |
|---|---|---|---|
toast(input) | string | { title, description?, variant?, duration?, action? } | — | Returns the id. |
toast.success / error / info | function | — | Variants. |
toast.dismiss(id?) | function | — | Dismiss one or all. |
position | ToasterProps | 'bottom-right' | Corner. |
visible | number | 3 | Toasts visible in the collapsed stack. |
Accessibility
- role="status" (polite) for normal toasts, role="alert" for errors.
- Timers pause while the stack is hovered or focused; every toast has a close button.