Component

Button

A clickable button with variant, size, loading, and disabled support. Uses the headless @refraction-ui/button core.

Variants

Six built-in visual variants for different contexts.

Default

Destructive

Outline

Secondary

Ghost

Link

Installation

$pnpm add @refraction-ui/react-button

Usage

tsx

import { Button } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <div className="flex gap-2">
      <Button variant="default">Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Delete</Button>
      <Button loading>Saving...</Button>
    </div>
  )
}

Sizes

Five sizes from extra-small to large, plus an icon-only size.

default

icon

States

Loading shows a spinner and disables interaction. Disabled greys out the button.

Disabled

Destructive + Loading

Outline + Disabled

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'default'`	Visual style of the button.
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon'`	`'default'`	Size of the button.
`loading`	`boolean`	`false`	Shows a spinner and disables interaction.
`disabled`	`boolean`	`false`	Disables the button.
`asChild`	`boolean`	`false`	Render as child element (e.g. wrap an <a> tag).
`className`	`string`	--	Additional CSS classes to apply.