Toggle
Single on/off control with sketch fill when pressed.
<Toggle roughness={1.5} aria-label="Bold">B</Toggle>CLI install
npx doodleui-react add toggle
Usage
import { Toggle } from "doodleui-react";
<Toggle aria-label="Bold">B</Toggle>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Padding and type size. |
| pressed / onPressedChange | boolean / (pressed: boolean) => void | uncontrolled | Radix toggle state. |
| animate | boolean | true | Draw-in on mount and seed morph when pressed. 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. |