Button

Interactive button component supporting multiple variants, sizes, and icon modes.

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, or performing an operation.

Usage

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

export function Example() {
  return <Button variant="primary">Click me</Button>;
}

Preview

Variants

Visual Variants

The variant prop controls the visual appearance of the button.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

Sizes

The size prop adjusts the padding and font size of the button (sm, md, lg).

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

Icon Only

Set isIconOnly to true for square/icon-only buttons.

import { Plus } from "lucide-react";

<Button isIconOnly size="md">
  <Plus />
</Button>

Loading State

Combine Button with Spinner for asynchronous action indicators:

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

export function LoadingButton() {
  return (
    <Button disabled variant="primary">
      <Spinner size="sm" />
      <span>Saving...</span>
    </Button>
  );
}

Button Group

Use ButtonGroup to connect multiple related actions together into a single layout:

import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";

export function SegmentedActions() {
  return (
    <ButtonGroup variant="outline">
      <ButtonGroupItem>Years</ButtonGroupItem>
      <ButtonGroupItem>Months</ButtonGroupItem>
      <ButtonGroupItem>Days</ButtonGroupItem>
    </ButtonGroup>
  );
}

API Reference

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'outline' \| 'destructive'`	`'primary'`	Visual style of the button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button.
`isIconOnly`	`boolean`	`false`	Adjusts layout and padding for icon-only buttons.
`disabled`	`boolean`	`false`	Disables user interaction.
`className`	`string`	`undefined`	Additional CSS classes.

Button

On this page