Orbit

Button

Source

The primary action element. Built with Tailwind and class-variance-authority, with variants, sizes and a stable loading state.

Variants

Treatments cover primary, secondary and tertiary actions, plus an inline link style.

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Sizes

Three text sizes plus a square icon size for icon-only actions.

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Plus /></Button>

With icons

Place lucide-react icons before or after the label inside children.

<Button>
  <Plus className="mr-2 h-4 w-4" />
  New project
</Button>
<Button variant="secondary">
  Continue
  <ArrowRight className="ml-2 h-4 w-4" />
</Button>

States

Loading swaps the label for a spinner without shifting layout. Disabled blocks interaction, and fullWidth fills the container.

<Button loading>Saving</Button>
<Button disabled>Disabled</Button>
<Button fullWidth>Full width</Button>

Props

Button extends the native button attributes. The most relevant props are listed below.

variant

"link" | "default" | "destructi…default: 'default'

Visual treatment of the button.

size

"sm" | "lg" | "default" | "icon…default: 'default'

Controls height and padding. Use icon for a square icon-only button.

loading

booleandefault: false

Shows a centered spinner and disables interaction while keeping the layout stable.

fullWidth

booleandefault: false

Stretches the button to fill the width of its container.

disabled

booleandefault: false

Prevents interaction and reduces opacity.

wrapperClassNames

string

Classes applied to the inner content wrapper that lays out children.

type

'button' | 'submit' | 'reset'default: 'button'

Native button type.

onClick

(event) => void

Click handler, forwarded to the underlying button element.

children

ReactNode

Button label and optional icons.

className

string

Classes merged onto the button element.