# Button

Triggers an action or navigates. Supports multiple visual variants and sizes.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode src="registry/mint/button.tsx">
      <Button>
        Button
      </Button>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode src="registry/berries/button.tsx">
      <BerriesButton>
        Button
      </BerriesButton>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode src="registry/citrine/button.tsx">
      <CitrineButton>
        Button
      </CitrineButton>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode src="registry/cinnamon/button.tsx">
      <CinnamonButton>
        Button
      </CinnamonButton>
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Variants [#variants]

Six visual styles for different contexts and hierarchy levels.

<div className="flex flex-wrap gap-3 items-center my-6">
  <Button variant="default">
    Default
  </Button>

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

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

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

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

  <Button variant="link">
    Link
  </Button>
</div>

## Sizes [#sizes]

Four general sizes plus three icon-only sizes.

<div className="flex flex-wrap gap-3 items-center my-6">
  <Button size="sm">
    Small
  </Button>

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

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

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

  <Button size="icon-sm">
    <MailIcon />
  </Button>

  <Button size="icon-lg">
    <MailIcon />
  </Button>
</div>

## With Icon [#with-icon]

Icons are sized automatically via `[&_svg]:size-4`.

<div className="flex flex-wrap gap-3 items-center my-6">
  <Button>
    <MailIcon />

    Send email
  </Button>

  <Button variant="outline">
    Continue <ArrowRightIcon />
  </Button>
</div>

## Loading [#loading]

Swap the icon for a spinner. Disable the button to prevent repeated submissions.

<div className="flex flex-wrap gap-3 items-center my-6">
  <Button>
    <Loader2Icon className="animate-spin" />

    Saving…
  </Button>

  <Button variant="outline">
    <Loader2Icon className="animate-spin" />

    Loading
  </Button>
</div>

## As Child [#as-child]

Use `asChild` to render the button styles on a different element.

<div className="my-6">
  <Button>
    <a href="#">
      Go to docs
    </a>
  </Button>
</div>

## Props [#props]

| Prop        | Type                                                                          | Default     | Description                          |
| ----------- | ----------------------------------------------------------------------------- | ----------- | ------------------------------------ |
| `variant`   | `"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"default"` | Visual style                         |
| `size`      | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`               | `"default"` | Size of the button                   |
| `asChild`   | `boolean`                                                                     | `false`     | Renders children as the root element |
| `className` | `string`                                                                      | —           | Additional CSS classes               |

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/button";
import { MailIcon } from "lucide-react";

// Default
<Button>Click me</Button>

// Variant
<Button variant="outline">Cancel</Button>

// Size
<Button size="lg">Get started</Button>

// With icon
<Button><MailIcon />Send email</Button>
```

## Specs [#specs]

```md
# Mint — Button Specs

## Component

- name: button
- file: registry/mint/button.tsx
- installs to: components/ui/button.tsx
- dependencies: class-variance-authority, radix-ui

## What is it

A multipurpose action trigger. Use it to submit forms, navigate, or initiate
operations. Prefer Button over a link when the action changes state or triggers
a process. Avoid using more than one "default" variant in the same visual area.

## Visual identity

Mint's fresh green palette. A medium green primary conveys energy and clarity.
Generous border radius (1.25rem) gives a light, airy, rounded feel, with soft
glassy borders throughout. A confident but approachable green found across
every accent.

## Design tokens

--primary: oklch(0.5 0.14 155) — medium green
--primary-foreground: oklch(1 0 0) — white
--secondary: oklch(0.95 0.04 155) — pale mint
--secondary-foreground: oklch(0.32 0.1 155)
--accent: oklch(0.92 0.05 155)
--accent-foreground: oklch(0.32 0.1 155)
--muted: oklch(0.96 0.02 155)
--muted-foreground: oklch(0.52 0.06 155) — soft green-grey
--destructive: oklch(0.55 0.25 15) — red
--border: oklch(0.88 0.04 155 / 60%) — soft glassy green-tinted border
--ring: oklch(0.5 0.14 155) — green focus ring
--radius: 1.25rem — generous, airy rounded

## Variants

- default → near-black fill. Primary CTA. High visual weight.
- secondary → light grey fill. Secondary action. Low visual weight.
- outline → transparent, grey border. Equal weight to secondary.
- ghost → no border, no fill. Tertiary action or toolbar button.
- destructive → red fill. Irreversible or dangerous actions only.
- link → text-only underline. Inline navigation or contextual actions.

## States

- hover: primary darkens slightly; outline/ghost shows tinted background
- focus: 3px ring in --ring colour (grey), offset 0
- disabled: opacity-50, pointer-events-none
- loading: Loader2Icon + animate-spin, always disable the button when loading

## Conventions

- One default variant per visual group maximum
- Pair default + outline for primary/secondary action pairs
- Pair default + ghost for toolbar actions
- Spacing between adjacent buttons: gap-2 (8px) minimum
- Icon-only buttons require aria-label
- SVG icons auto-size to 16px — do not override unless intentional
```

## Installation [#installation]

<CommandBox componentName="button" className="mt-2" />