Button

A versatile button component built on top of bits-ui with multiple colors, variants and sizes for different use cases.

Basic Usage

<Button variant="solid">Default - Solid</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="flat">Flat</Button>
<Button variant="link">Link</Button>

Group

<ButtonGroup>
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
    <Button>Fourth</Button>
</ButtonGroup>

Colors

The Button component supports multiple color schemes that can be combined with any variant:

Primary (Default)

Danger

Success

Warning

Info

Variants

Solid

The default variant with filled background and contrasting text.

<Button variant="solid">Solid Button</Button>
<Button color="danger" variant="solid">Danger Solid</Button>

Ghost

Transparent background with subtle hover effects.

<Button variant="ghost">Ghost Button</Button>
<Button color="danger" variant="ghost">Danger Ghost</Button>

Outline

Bordered button with transparent background.

<Button variant="outline">Outline Button</Button>
<Button color="danger" variant="outline">Danger Outline</Button>

Flat

Subtle background with colored text.

<Button variant="flat">Flat Button</Button>
<Button color="danger" variant="flat">Danger Flat</Button>

Link

Text-only button with underline styling.

<Button variant="link">Link Button</Button>
<Button color="danger" variant="link">Danger Link</Button>

Sizes

The Button component comes in multiple sizes:

Small

Medium (Default)

Large

Icon

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="icon">
    <svg>...</svg>
</Button>

Loading State

Buttons can show a loading spinner when performing async operations:

<Button isLoading>Loading Button</Button>
<Button color="danger" variant="outline" isLoading>Loading Outline</Button>

Disabled State

<Button disabled>Disabled Button</Button>
<Button color="danger" disabled>Disabled Danger</Button>

Border Radius

Control the border radius of buttons:

<Button radius="none">Sharp</Button>
<Button radius="base">Rounded</Button>
<Button radius="full">Pill</Button>

Size Comparison

Common Use Cases

Form Actions

Destructive Actions

Call-to-Action

Icon Buttons

Navigation Links

Props

Prop	Type	Default	Description
`color`	`"primary" \\| "danger" \\| "success" \\| "warning" \\| "info"`	`"primary"`	Color scheme of the button
`variant`	`"solid" \\| "ghost" \\| "outline" \\| "flat" \\| "link"`	`"solid"`	Visual variant of the button
`size`	`"sm" \\| "md" \\| "lg" \\| "icon"`	`"md"`	Size of the button
`radius`	`"none" \\| "base" \\| "full"`	`"base"`	Border radius of the button
`isLoading`	`boolean`	`false`	Show loading spinner and disable interaction
`disabled`	`boolean`	`false`	Whether the button is disabled
`class`	`string`	`undefined`	Additional CSS classes

All other props from the underlying bits-ui Button.Root component are also supported.

Real-world Example

Delete User Modal

Are you sure you want to delete user John Doe? This action cannot be undone.

<div class="flex gap-sm">
    <Button color="danger" variant="ghost">Cancel</Button>
    <Button color="danger" variant="solid">Delete</Button>
</div>