Badge
Compact label with a sketch rectangle. Use it for status, counts, or a one-word tag.
sketch
<Badge variant="accent" roughness={1.5}>sketch</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. |
| 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. |