Alert
Callout with a color-coded stroke: info, warning, error, success. Body copy stays ink-colored so it stays readable.
Heads up
Callouts keep a color-coded stroke and a light wash fill.
<Alert variant="info" title="Heads up" roughness={1.5}>
Callouts keep a color-coded stroke.
</Alert>Usage
import { Alert } from "doodleui-react";
<Alert variant="warning" title="Heads up">
Seed values lock screenshots. Shuffle is for demos.
</Alert>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "info" | "warning" | "error" | "success" | "info" | Sets stroke and wash color. |
| title | ReactNode | undefined | Bold first line. |
| 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. |