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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ ButtonDemo() {
	<div class="flex flex-wrap items-center gap-2 md:flex-row">
		@button.Button(button.Props{Variant: button.VariantOutline}) {
			Button
		}
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Size:       button.SizeIcon,
			Attributes: templ.Attributes{"aria-label": "Submit"},
		}) {
			@icon.ArrowUp()
		}
	</div>
}
```

## Installation

<CodeTabs>

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

```bash
shadcn-templ add button
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

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

<ComponentSource name="button" title="components/button/button.templ" />

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go
import "github.com/axadrn/shadcn-templ/v2/components/button"
```

```templ
@button.Button(button.Props{Variant: button.VariantOutline}) {
	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;
  }
}
```

## Size

Use the `Size` prop to change the size of the button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ ButtonSize() {
	<div class="flex flex-col items-start gap-8 sm:flex-row">
		<div class="flex items-start gap-2">
			@button.Button(button.Props{
				Size:    button.SizeXs,
				Variant: button.VariantOutline,
			}) {
				Extra Small
			}
			@button.Button(button.Props{
				Size:       button.SizeIconXs,
				Variant:    button.VariantOutline,
				Attributes: templ.Attributes{"aria-label": "Submit"},
			}) {
				@icon.ArrowUpRight()
			}
		</div>
		<div class="flex items-start gap-2">
			@button.Button(button.Props{
				Size:    button.SizeSm,
				Variant: button.VariantOutline,
			}) {
				Small
			}
			@button.Button(button.Props{
				Size:       button.SizeIconSm,
				Variant:    button.VariantOutline,
				Attributes: templ.Attributes{"aria-label": "Submit"},
			}) {
				@icon.ArrowUpRight()
			}
		</div>
		<div class="flex items-start gap-2">
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Default
			}
			@button.Button(button.Props{
				Size:       button.SizeIcon,
				Variant:    button.VariantOutline,
				Attributes: templ.Attributes{"aria-label": "Submit"},
			}) {
				@icon.ArrowUpRight()
			}
		</div>
		<div class="flex items-start gap-2">
			@button.Button(button.Props{
				Size:    button.SizeLg,
				Variant: button.VariantOutline,
			}) {
				Large
			}
			@button.Button(button.Props{
				Size:       button.SizeIconLg,
				Variant:    button.VariantOutline,
				Attributes: templ.Attributes{"aria-label": "Submit"},
			}) {
				@icon.ArrowUpRight()
			}
		</div>
	</div>
}
```

## Default

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonDefault() {
	@button.Button() {
		Button
	}
}
```

## Outline

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonOutline() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
	}) {
		Outline
	}
}
```

## Secondary

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonSecondary() {
	@button.Button(button.Props{
		Variant: button.VariantSecondary,
	}) {
		Secondary
	}
}
```

## Ghost

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonGhost() {
	@button.Button(button.Props{
		Variant: button.VariantGhost,
	}) {
		Ghost
	}
}
```

## Destructive

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonDestructive() {
	@button.Button(button.Props{
		Variant: button.VariantDestructive,
	}) {
		Destructive
	}
}
```

## Link

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonLink() {
	@button.Button(button.Props{
		Variant: button.VariantLink,
	}) {
		Link
	}
}
```

## Icon

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ ButtonIcon() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
		Size:    button.SizeIcon,
	}) {
		@icon.CircleFadingArrowUp()
	}
}
```

## With Icon

Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ ButtonWithIcon() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
		Size:    button.SizeSm,
	}) {
		@icon.GitBranch()
		New Branch
	}
}
```

## Rounded

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ ButtonRounded() {
	<div class="flex flex-col gap-8">
		@button.Button(button.Props{
			Variant: button.VariantOutline,
			Size:    button.SizeIcon,
			Class:   "rounded-full",
		}) {
			@icon.ArrowUp()
		}
	</div>
}
```

## Spinner

Render a spinner component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/spinner"
)

templ ButtonSpinner() {
	<div class="flex gap-2">
		@button.Button(button.Props{
			Variant:  button.VariantOutline,
			Disabled: true,
		}) {
			@spinner.Spinner(spinner.Props{Attributes: templ.Attributes{"data-icon": "inline-start"}})
			Generating
		}
		@button.Button(button.Props{
			Variant:  button.VariantSecondary,
			Disabled: true,
		}) {
			Downloading
			@spinner.Spinner(spinner.Props{Attributes: templ.Attributes{"data-icon": "inline-start"}})
		}
	</div>
}
```

## Button Group

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/buttongroup"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/utils"
)

templ ButtonGroupDemo() {
	@buttongroup.ButtonGroup() {
		@buttongroup.ButtonGroup(buttongroup.Props{Class: "hidden sm:flex"}) {
			@button.Button(button.Props{
				Variant:    button.VariantOutline,
				Size:       button.SizeIcon,
				Attributes: templ.Attributes{"aria-label": "Go Back"},
			}) {
				@icon.ArrowLeft()
			}
		}
		@buttongroup.ButtonGroup() {
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Archive
			}
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Report
			}
		}
		@buttongroup.ButtonGroup() {
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Snooze
			}
			@dropdownmenu.DropdownMenu() {
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Size:       button.SizeIcon,
					Attributes: utils.MergeAttributes(dropdownmenu.Trigger(ctx), templ.Attributes{"aria-label": "More Options"}),
				}) {
					@icon.Ellipsis()
				}
				@dropdownmenu.Content(dropdownmenu.ContentProps{
					Align: dropdownmenu.AlignEnd,
					Class: "w-40",
				}) {
					@dropdownmenu.Group() {
						@dropdownmenu.Item() {
							@icon.MailCheck()
							Mark as Read
						}
						@dropdownmenu.Item() {
							@icon.Archive()
							Archive
						}
					}
					@dropdownmenu.Separator()
					@dropdownmenu.Group() {
						@dropdownmenu.Item() {
							@icon.Clock()
							Snooze
						}
						@dropdownmenu.Item() {
							@icon.CalendarPlus()
							Add to Calendar
						}
						@dropdownmenu.Item() {
							@icon.ListFilter()
							Add to List
						}
						@dropdownmenu.Sub() {
							@dropdownmenu.SubTrigger() {
								@icon.Tag()
								Label As...
							}
							@dropdownmenu.SubContent() {
								@dropdownmenu.RadioGroup() {
									@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{
										Value:   "personal",
										Checked: true,
									}) {
										Personal
									}
									@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "work"}) {
										Work
									}
									@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "other"}) {
										Other
									}
								}
							}
						}
					}
					@dropdownmenu.Separator()
					@dropdownmenu.Group() {
						@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {
							@icon.Trash2()
							Trash
						}
					}
				}
			}
		}
	}
}
```

## As Link

Set the `Href` prop to render the button as a semantic link that looks like a button.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/button"

templ ButtonRender() {
	@button.Button(button.Props{
		Href:    "#",
		Variant: button.VariantSecondary,
		Size:    button.SizeSm,
	}) {
		Login
	}
}
```

## 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`  | `VariantDefault \| VariantSecondary \| VariantOutline \| VariantGhost \| VariantDestructive \| VariantLink` | `VariantDefault` |
| `Size`     | `SizeDefault \| SizeXs \| SizeSm \| SizeLg \| SizeIcon \| SizeIconXs \| SizeIconSm \| SizeIconLg`           | `SizeDefault`    |
| `Type`     | `TypeButton \| TypeSubmit \| TypeReset`                                                                     | `TypeButton`     |
| `Href`     | `string`                                                                                                    | -                |
| `Target`   | `string`                                                                                                    | -                |
| `Disabled` | `bool`                                                                                                      | `false`          |
| `Form`     | `string`                                                                                                    | -                |
| `Class`    | `string`                                                                                                    | -                |