‹ components

Button

stablev1.0.0·open in canvas

The action primitive — four variants on the semantic tokens, three heights on the shared scale.

Installnpx shadcn add @cids/button
Live demo

Motion · tap to replay

honors reduced-motion

Targeted `transition-[background-color,color,box-shadow,transform]` 150ms (never `transition-all`); press scale 0.96. Reduced-motion: global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Button } from "@/design-system";

<Button variant="primary" onClick={confirm}>Confirm</Button>
<Button variant="destructive" size="sm">Remove</Button>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · live

Forced instances — hover/focus still work on the live demo above.

defaulthoveractivefocus-visibledisabled (`opacity-40`no events)

primary

secondary

ghost

destructive

disabled

sm

The action primitive — four variants on the semantic tokens, three heights on the shared scale.

Anatomy

┌──────────────────────┐
│ [icon]  Label        │ ← inline-flex, gap-2, rounded-control
└──────────────────────┘
  primary: brand fill · secondary: container+border ·
  ghost: text only · destructive: sell fill

Props

PropTypeDefaultNotes
variant"primary" "secondary" \"ghost" \"destructive"`"secondary"Destructive pairs with a confirm step (Dialog).
size"sm" "md" \"lg"`"md"Heights 28 / 36 / 44 px (shared scale).
classNamestring—cn-merged.
…restButtonHTMLAttributestype="button"Native pass-through (onClick, disabled…).

Motion

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.