Introduction

Buttons help users perform actions such as submitting forms, confirming choices, or navigating flows. The component supports multiple variants, semantic themes, icon placement, loading states, and icon-only buttons.

Installation

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

Usage

<Button>Primary Action</Button>

Examples

Default

ButtonDefault

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

export default function Component() {
  return <Button>Primary Action</Button>;
}

Variants

ButtonVariants

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

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Filled</Button>
      <Button variant="outlined">Outlined</Button>
      <Button variant="tonal">Tonal</Button>
      <Button variant="text">Text</Button>
    </div>
  );
}

Themes

ButtonThemes

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

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button theme="primary">Primary</Button>
      <Button theme="success">Success</Button>
      <Button theme="destructive">Destructive</Button>
    </div>
  );
}

Sizes

ButtonSizes

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

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

With Icons

ButtonWithIcons

import { ArrowRight, Download, Search } from 'lucide-react';

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

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button prefixIcon={<Search className="size-4" />}>Search</Button>
      <Button variant="outlined" suffixIcon={<ArrowRight className="size-4" />}>
        Continue
      </Button>
      <Button iconButton aria-label="Download">
        <Download className="size-4" />
      </Button>
    </div>
  );
}

Loading

ButtonLoading

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

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button loading>Submitting</Button>
      <Button variant="outlined" disabled>
        Disabled
      </Button>
    </div>
  );
}

API Reference

Button

Prop	Type	Default	Description
`variant`	`filled \| outlined \| tonal \| text`	`filled`	Visual style of the button
`theme`	`primary \| success \| destructive`	`primary`	Color theme
`size`	`sm \| md \| lg`	`md`	Button size
`loading`	`boolean`	`false`	Shows a spinner and disables interaction
`disabled`	`boolean`	`false`	Disables the button
`prefixIcon`	`ReactNode`	—	Leading icon
`suffixIcon`	`ReactNode`	—	Trailing icon
`iconButton`	`boolean`	`false`	Renders as icon-only button
`asChild`	`boolean`	`false`	Renders the button styles onto a child element
`contentContainerClassName`	`string`	—	Extra classes for the label wrapper

Button

On this page