Core / Buttons

Button

Triggers an immediate user action.

Preview

import { Button } from "@/components/ui/design-system/core/buttons/Button"

<Button variant="primary" size="md">Continue</Button>

Installation

Full library

pnpm install:project /absolute/path/to/your-project

Manual install

The guided installer is the next library milestone. This component will be selectable as Core → Buttons → Button.

Usage

<Button variant="primary" size="md">Continue</Button>

Adopt to your project

Use variant and size for semantics. Use className for local spacing, width, color, and composition. The rendered element exposes data-slot, data-variant, and data-size selectors.

<Button variant="primary" size="md" className="rounded-full px-6 shadow-sm">Continue</Button>

Accessibility

Use clear visible text. Keep type=button unless the action submits or resets a form. Loading buttons expose aria-busy and are disabled.

API reference

Attribute	Type	Default	Required	Purpose
`children`	`ReactNode`	—	Yes	Visible button content.
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	"primary"	No	Semantic action treatment.
`size`	`"sm" \| "md" \| "lg"`	"md"	No	Control height and horizontal padding.
`radius`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	component default	No	Corner treatment.
`loading`	`boolean`	false	No	Shows loading content and prevents interaction.
`disabled`	`boolean`	false	No	Prevents interaction.
`type`	`"button" \| "submit" \| "reset"`	"button"	No	Native button behavior.
`className`	`string`	—	No	Local project styling.
`unstyled`	`boolean`	false	No	Removes the component’s default classes.