Toast
Radix toast with Alert-like sketch chrome. Wrap the tree in ToastProvider for stacking, auto-dismiss, and the live region.
<Toast variant="success" title="Saved" roughness={1.5}>
The sketch is in the notebook.
</Toast>CLI install
npx doodleui-react add toast
Usage
import { Toast, ToastProvider, Button } from "doodleui-react";
<ToastProvider>
<Button onClick={() => setOpen(true)}>Show toast</Button>
<Toast open={open} onOpenChange={setOpen} variant="success" title="Saved">
The sketch is in the notebook.
</Toast>
</ToastProvider>
ARIA live region, duration, and swipe come from Radix. Entry slides in with a short sketchy settle wobble and reverses on exit. Set animate={false} for an instant card.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "info" | "warning" | "error" | "success" | "info" | Sets stroke and wash color, matching Alert. |
| title | ReactNode | undefined | Bold first line. |
| open / onOpenChange | boolean / (open: boolean) => void | uncontrolled | Radix toast visibility. Auto-dismiss comes from ToastProvider duration. |
| duration | number | provider | Override auto-dismiss for this toast, in milliseconds. |
| animate | boolean | true | Slide-in with a sketchy settle wobble; reverse on exit. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |