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

<ComponentExample src="/components/examples/button/demo.tsx">
  <ButtonDemo />
</ComponentExample>

## Installation

1. Copy and paste the following code into your project.

<ComponentSource src="/components/ui/button.tsx" />

<Callout>
  This is the `<Button />` primitive. You can place it in a file at
  `components/ui/button.tsx`.
</Callout>

## Usage

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

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

## Examples

### Default

<ComponentExample src="/components/examples/button/demo.tsx">
  <ButtonDemo />
</ComponentExample>

---

### Outline

<ComponentExample src="/components/examples/button/outline.tsx">
  <ButtonOutline />
</ComponentExample>

---

### Subtle

<ComponentExample src="/components/examples/button/subtle.tsx">
  <ButtonSubtle />
</ComponentExample>

---

### Ghost

<ComponentExample src="/components/examples/button/ghost.tsx">
  <ButtonGhost />
</ComponentExample>

---

### Link

<ComponentExample src="/components/examples/button/link.tsx">
  <ButtonLink />
</ComponentExample>

---

### With Icon

<ComponentExample src="/components/examples/button/with-icon.tsx">
  <ButtonWithIcon />
</ComponentExample>

---

### Loading

<ComponentExample src="/components/examples/button/loading.tsx">
  <ButtonLoading />
</ComponentExample>