Navigation: [/sitemap.md](/sitemap.md)

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

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'button' }}
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
  <Icon name="arrow-up-right" />
</Button>
```

## Installation

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

## Usage

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

You can also import `buttonVariants` to reuse button styles on custom elements.

```ts
import { buttonVariants } from "@/components/ui/button"
```

```astro
<Button>Button</Button>
```

### Link

Pass `href` to render the button as a link element. You can also pass
`as="a"` explicitly when you want to make the rendered element obvious at the
call site.

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

<Button href="#">Login</Button>
```

### Polymorphic

`Button` is polymorphic via `as`. Pass `as` to change the rendered element and
use the relevant attributes for that element.

```astro
<Button as="button" type="button">Save</Button>
<Button href="/docs/">Docs</Button>
<Button as="label" for="file-upload">Upload</Button>
```

## Examples

```astro live
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="icon-sm" aria-label="Open">
  <Icon name="arrow-up-right" />
</Button>
<Button variant="outline">Default</Button>
<Button variant="outline" size="icon" aria-label="Open">
  <Icon name="arrow-up-right" />
</Button>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="icon-lg" aria-label="Open">
  <Icon name="arrow-up-right" />
</Button>
```

```astro live
---
import { Button } from "@/components/ui/button"
---

<Button>Button</Button>
```

```astro live
---
import { Button } from "@/components/ui/button"
---

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

```astro live
---
import { Button } from "@/components/ui/button"
---

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

```astro live
---
import { Button } from "@/components/ui/button"
---

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

```astro live
---
import { Button } from "@/components/ui/button"
---

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

```astro live
---
import { Button } from "@/components/ui/button"
---

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

```astro live
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<Button variant="outline" size="icon" aria-label="Submit">
  <Icon name="circle-fading-arrow-up" />
</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.

```astro live
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<Button variant="outline" size="sm">
  <Icon name="git-branch" />
  New branch
</Button>
```

### Rounded

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

```astro live
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<Button
  class="rounded-full"
  size="icon"
  variant="outline"
  aria-label="Scroll up"
>
  <Icon name="arrow-up" />
</Button>
```

```astro live
---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---

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

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/button) for more information on props.