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. primary is a typed alias of default — see below.

Default

Primary (alias)

Destructive

Outline

Secondary

Ghost

Link

`primary` aliases `default`

variant="primary" renders identically to variant="default" so muscle-memory from MUI, Chakra, and shadcn doesn't fall through to an unstyled base. Use whichever name reads better in your codebase.

variant="default"

variant="primary"

Both render with the same emphasis classes. primary is a typed alias of default.

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' \| 'primary' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'default'`	Visual style. `primary` is a typed alias of `default` so muscle-memory from MUI/Chakra/Mantine works (issue #201).
`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.