Button

A clickable control. The label is real HTML. The border and fill are a rough.js rectangle sitting behind it.

Roughness1.5Lock seedVariantSize

<Button variant="primary" size="md" roughness={1.5}>
  Draw me
</Button>

Usage

import { Button } from "doodleui-react";

<Button variant="primary" size="md">
  Draw me
</Button>

Primary and secondary use hachure fills. Outline is stroke-only. Ghost hides the stroke until hover.

Prop	Type	Default	Notes
variant	"primary" \| "secondary" \| "outline" \| "ghost"	"primary"	Fill treatment. Ghost hides the stroke until hover.
size	"sm" \| "md" \| "lg"	"md"	Padding and type size.
disabled	boolean	false	Native disabled state. Lowers opacity.
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.