Badge
Compact label with a sketch rectangle. Use it for status, counts, or a one-word tag. The border draws in on mount.
sketch
<Badge variant="accent" roughness={1.5}>sketch</Badge>CLI install
npx doodleui-react add badge
Usage
import { Badge } from "doodleui-react";
<Badge variant="accent">sketch</Badge>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "default" | "accent" | "outline" | "default" | Fill and stroke pairing. |
| animate | boolean | true | Draw-in the border on mount. 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. |