Button

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

The border draws itself in on mount, then re-inks with a second seed on hover. Toggle animate in the playground to compare. See Animation for the library-wide pattern.

Roughness1.5Lock seedVariantSizeAnimate

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

CLI install

npx doodleui-react add button

Usage

import { Button, DoodleUIProvider } from "doodleui-react";

<DoodleUIProvider>
  <Button variant="primary" size="md">
    Draw me
  </Button>
  <Button asChild>
    <a href="/docs">Docs link</a>
  </Button>
  <Button loading>Saving…</Button>
  <Button startIcon={<Icon />} aria-label="Add" />
  <Button animate={false}>Static sketch</Button>
</DoodleUIProvider>

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

See Sizing, Icons, and Forms for shared conventions.

Props

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.
animate	boolean	true	Draw-in on mount and seed-morph on hover. Set false for a static sketch. 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.