shadcn-ui/apps/v4/content/docs/components/button.mdx

---
title: Button
description: Displays a button or a component that looks like a button.
featured: true
component: true
---

import { InfoIcon } from "lucide-react"

<Callout variant="info" icon={<InfoIcon />}>
**Updated:** We have updated the button component to add new sizes: `icon-sm` and `icon-lg`. See the
[changelog](/docs/components/button#changelog) for more details. Follow the
instructions to update your project.

</Callout>

<ComponentPreview name="button-demo" description="A button" className="mb-4" />

```tsx showLineNumbers
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
  <ArrowUpIcon />
</Button>
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add button
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @radix-ui/react-slot
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="button" title="components/ui/button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx
import { Button } from "@/components/ui/button"
```

```tsx
<Button variant="outline">Button</Button>
```

## Cursor

Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.

If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:

```css showLineNumbers title="globals.css"
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}
```

## Examples

### Size

<ComponentPreview name="button-size" className="mb-4" />

```tsx
// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
```

### Default

<ComponentPreview
  name="button-default"
  description="A primary button"
  className="mb-4"
/>

```tsx
<Button>Button</Button>
```

### Outline

<ComponentPreview
  name="button-outline"
  description="A button using the outline variant."
  className="mb-4"
/>

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

### Secondary

<ComponentPreview
  name="button-secondary"
  description="A secondary button"
  className="mb-4"
/>

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

### Ghost

<ComponentPreview
  name="button-ghost"
  description="A button using the ghost variant"
  className="mb-4"
/>

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

### Destructive

<ComponentPreview
  name="button-destructive"
  description="A destructive button"
  className="mb-4"
/>

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

### Link

<ComponentPreview
  name="button-link"
  description="A button using the link variant."
  className="mb-4"
/>

```tsx
<Button variant="link">Link</Button>
```

### Icon

<ComponentPreview
  name="button-icon"
  description="An icon button"
  className="mb-4"
/>

```tsx showLineNumbers
<Button variant="outline" size="icon" aria-label="Submit">
  <CircleFadingArrowUpIcon />
</Button>
```

### With Icon

The spacing between the icon and the text is automatically adjusted
based on the size of the button. You do not need any margin on the icon.

<ComponentPreview
  name="button-with-icon"
  description="A button with an icon"
  className="mb-4"
/>

```tsx
<Button variant="outline" size="sm">
  <IconGitBranch /> New Branch
</Button>
```

### Rounded

Use the `rounded-full` class to make the button rounded.

<ComponentPreview name="button-rounded" className="mb-4" />

```tsx
<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpRightIcon />
</Button>
```

### Spinner

<ComponentPreview
  name="button-loading"
  description="A button with a loading state."
  className="mb-4"
/>

```tsx showLineNumbers
<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>
```

### Button Group

To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.

<ComponentPreview name="button-group-demo" className="mb-4" />

```tsx showLineNumbers
<ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="icon" aria-label="Go Back">
      <ArrowLeftIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Archive</Button>
    <Button variant="outline">Report</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Snooze</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="More Options">
          <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent />
    </DropdownMenu>
  </ButtonGroup>
</ButtonGroup>
```

### Link

You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.

```tsx showLineNumbers
import Link from "next/link"

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

export function LinkAsButton() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  )
}
```

## API Reference

### Button

The `Button` component is a wrapper around the `button` element that adds a variety of styles and functionality.

| Prop      | Type                                                                          | Default     |
| --------- | ----------------------------------------------------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`               | `"default"` |
| `asChild` | `boolean`                                                                     | `false`     |

## Changelog

### 2025-09-24 New sizes

We have added two new sizes to the button component: `icon-sm` and `icon-lg`. These sizes are used to create icon buttons. To add them, edit `button.tsx` and add the following code under `size` in `buttonVariants`:

```tsx showLineNumbers title="components/ui/button.tsx"
const buttonVariants = cva("...", {
  variants: {
    size: {
      // ...
      "icon-sm": "size-8",
      "icon-lg": "size-10",
      // ...
    },
  },
})
```