Button

Previous

A versatile button component with multiple variants and sizes.

Docs API Reference

Usage

The basic button can be used for primary actions.

import { Button } from "@/components/ui/button"
 
export function ButtonDemo() {
  return (
    <Button>Click me</Button>
  )
}

Variants

Primary

The default button variant for primary actions.

<Button variant="default">Primary</Button>

Secondary

Use for secondary actions.

<Button variant="secondary">Secondary</Button>

Outline

For subtle actions or when you need a lighter visual weight.

<Button variant="outline">Outline</Button>

Ghost

For minimal actions or when used in toolbars.

<Button variant="ghost">Ghost</Button>

Sizes

Small

<Button size="sm">Small</Button>

Default

<Button size="default">Default</Button>

Large

<Button size="lg">Large</Button>

States

Disabled

<Button disabled>Disabled</Button>

Loading

<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Loading...
</Button>

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive""default"The visual variant of the button
size"sm" | "default" | "lg" | "icon""default"The size of the button
disabledbooleanfalseWhether the button is disabled
asChildbooleanfalseChange the component to the HTML tag or custom component of the child