Button

A button for primary actions and form submits. Wraps a native <button> (so it accepts type, onClick, and the rest of the button attributes) and adds variants, sizes and a loading state.

Variants

primary is an inverted (ink-on-background) fill for the main action; secondary is a bordered neutral button; ghost is transparent with a hover tint (for low-emphasis / list actions); danger is for destructive actions; link renders as inline underlined text with no padding.

Sizes & states

Three sizes (sm, md, lg). loading shows a spinner and disables the button; disabled greys it out and blocks clicks.

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'link'`	`'primary'`	Visual style. `'destructive'` is also accepted as an alias for `'danger'`.
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Padding/text scale.
`loading`	`boolean`	`false`	Shows a spinner and disables the button.
`leftIcon`	`ReactNode`	—	Icon rendered before the label.
`icon`	`boolean`	`false`	Square icon-button padding (for a button whose content is a single icon).
`value`	`boolean`	`false`	Active/selected state — renders the label and icon in the accent color.
`asChild`	`boolean`	`false`	Render the single child element with the button styling instead of a `<button>` (merging classes and forwarding props).
`disabled`	`boolean`	`false`	Disables interaction.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`className`	`string`	—	Extra classes on the button.

Any other native <button> attributes (onClick, aria-*, …) are forwarded.

`buttonVariants`

buttonVariants(options) returns the composed class string for a button without rendering one. Accepts variant, size, icon, value, and className, and is useful for styling a non-button element (like a link) to match the button set.