Toast Composition
Transient confirmation, stacked in the corner. The provider renders its own viewport, because a provider without one fails silently: the toast is created and nothing ever appears.
Setup
import { ToastProvider } from '@ceebee/ui/client';
export default function Layout({ children }) { return <ToastProvider timeout={5000}>{children}</ToastProvider>;}Usage
const toast = useToast();
toast.show({ title: 'Saved', description: 'Your changes are live.', tone: 'success' });toast.show({ title: 'Draft deleted', action: { label: 'Undo', onClick: restore } });The action renders as a soft button rather than bare text: at rest, a text action's padding reads as a stray gap beside the title, and only hovering explains it.
Errors do not disappear
tone="danger" sets no timeout. Something went wrong is not a thing to miss by looking away, so an
error toast waits to be dismissed while every other tone leaves on its own.
Do
Pair a destructive action with an Undo — a toast is the natural place for it.
Don't
Put the only copy of important information in a toast; it is gone in five seconds and there is no history.
API
| Prop | Type | Default | Notes |
|---|---|---|---|
| ToastProvider timeout | number | 5000 | Milliseconds before a toast leaves. Errors ignore it. |
| ToastProvider limit | number | 4 | How many stack before the oldest is dropped. |
| ToastProvider position | 'bottom-end' | 'bottom-center' | 'bottom-start' | 'top-end' | 'top-center' | 'top-start' | 'bottom-end' | Logical, so end follows the writing direction. A top stack enters from above. |
| toast.show({...}) | (options) => string | — | title, description, tone, timeout, action. Returns an id. |
| toast.close(id?) | (id?: string) => void | — | Closes one, or all of them. |
| toast.promise(p, states) | function | — | Loading, success, and error in one call. |