Button

Auto-generate your docs

The Button component is a versatile, accessible button that supports multiple visual styles, sizes, and a loading state.

Installation

import { Button } from "@craftdotui/baseui/components/button";

Usage

<Button>Click me</Button>

<Button variant="destructive">Delete</Button>

<Button loading>Processing...</Button>

Props

string

default:"default"

Visual style of the button.Options: default, secondary, destructive, outline, ghost, link

string

default:"md"

Size of the button.Options: xs, sm, md, lg, xl, icon-xs, icon-sm, icon, icon-lg, icon-xl

boolean

default:"false"

When true, displays a loading spinner and disables the button.

boolean

Disables the button and prevents interaction.

function

Custom render function from @base-ui/react’s useRender hook for polymorphic rendering.

Variants

The Button component uses class-variance-authority (CVA) for variant management:

default: Primary button with filled background
secondary: Secondary style with muted appearance
destructive: Red/destructive actions
outline: Border with transparent background
ghost: Minimal style with no border
link: Text-only with underline on hover

Sizes

Regular sizes: xs (h-7), sm (h-8), md (h-8.5), lg (h-9), xl (h-9.5) Icon sizes: icon-xs through icon-xl for square icon-only buttons

Examples

Variants

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

Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

With Icons

import { Download } from "lucide-react";

<Button>
  <Download />
  Download
</Button>

<Button size="icon">
  <Download />
</Button>

Loading State

<Button loading>Saving...</Button>

Accessibility

Built on @base-ui/react for full accessibility support:

Semantic <button> element by default
Keyboard navigation support
Focus visible ring on keyboard focus
aria-busy attribute when loading
Proper disabled state handling

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Installation

Usage

Props

Variants

Sizes

Examples

Variants

Sizes

With Icons

Loading State

Accessibility

​Installation

​Usage

​Props

​Variants

​Sizes

​Examples

​Variants

​Sizes

​With Icons

​Loading State

​Accessibility

Installation

Usage

Props

Variants

Sizes

Examples

Variants

Sizes

With Icons

Loading State

Accessibility