Button

primitive

Primary, secondary, ghost, and danger variants with size presets and loading/disabled states. Polymorphic: renders an anchor whenhref is provided.

Preview

Scale1.00

Variants

Sizes

States

Link button

Usage

import { Button } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Button variant="primary" size="md">
  Get started
</Button>

<Button href="/docs" variant="secondary">
  Read the docs
</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'primary'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset
`href`	`string`	--	Renders as anchor when set
`loading`	`boolean`	`false`	Shows spinner, disables interaction
`disabled`	`boolean`	`false`	Standard disabled state
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML type attribute
`onClick`	`EventHandler`	--	Click handler
`class`	`string`	--	Additional CSS classes
`aria-label`	`string`	--	Accessible label override

Accessibility

Keyboard: Focusable via Tab. Activates on Enter/Space.
ARIA: aria-busy when loading, aria-disabled on anchor variant.
Focus: Visible :focus-visible ring using --accent.
Motion: Hover transitions honor prefers-reduced-motion.

Do / Don't

Do

Use primary for the single most important action on a page. Use secondary for supporting actions.

Don't

Don't stack multiple primary buttons in the same section. Use variant hierarchy to guide focus.