Button

An action trigger with default, outline, secondary, ghost, destructive, and link variants.

When to use

Use when: Triggering an action: submitting, saving, opening, or confirming.
Avoid when: Navigating to another page; use a link, which can look like a Button.

Installation

bunx shelf add button

The source lands in src/components/ui/button.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { Button } from "@/components/ui/button";

<Button />

Examples

Sizes

With icon

Icons sit before or after the label. Icon-only buttons need an accessible label.

Loading

Disable the button and show a Spinner while the action runs.

As a link

A link that looks like a Button but still navigates like a link.

View invoices

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.