Button

Displays a button or a component that looks like a button.

package examples import (

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

shadcn-templ add button

Copy and paste the following code into your project.

components/button/button.templ

package button import "github.com/axadrn/shadcn-templ/v2/utils" type Variant stringtype Size stringtype Type string const (	VariantDefault     Variant = "default"	VariantDestructive Variant = "destructive"	VariantOutline     Variant = "outline"	VariantSecondary   Variant = "secondary"	VariantGhost       Variant = "ghost"	VariantLink        Variant = "link") const (	TypeButton Type = "button"	TypeReset  Type = "reset"	TypeSubmit Type = "submit") const (	SizeDefault Size = "default"	SizeXs      Size = "xs"	SizeSm      Size = "sm"	SizeLg      Size = "lg"	SizeIcon    Size = "icon"	SizeIconXs  Size = "icon-xs"	SizeIconSm  Size = "icon-sm"	SizeIconLg  Size = "icon-lg") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    Variant	Size       Size	Href       string	Target     string	Disabled   bool	Type       Type	Form       string} // 1:1 base/ui/button.tsx: structure lives here, the look comes from the// active style-*.css via the cn-button-* classes.const baseClasses = "cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0" templ Button(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Type == "" {		{{ p.Type = TypeButton }}	}	if p.Variant == "" {		{{ p.Variant = VariantDefault }}	}	if p.Size == "" {		{{ p.Size = SizeDefault }}	}	if p.Href != "" && !p.Disabled {		<a			if p.ID != "" {				id={ p.ID }			}			href={ templ.SafeURL(p.Href) }			if p.Target != "" {				target={ p.Target }			}			if _, ok := p.Attributes["data-slot"]; !ok {				data-slot="button"			}			class={ utils.CN(baseClasses, p.variantClasses(), p.sizeClasses(), p.Class) }			{ p.Attributes... }		>			{ children... }		</a>	} else {		<button			if p.ID != "" {				id={ p.ID }			}			if _, ok := p.Attributes["data-slot"]; !ok {				data-slot="button"			}			class={ utils.CN(baseClasses, p.variantClasses(), p.sizeClasses(), p.Class) }			if p.Type != "" {				type={ string(p.Type) }			}			if p.Form != "" {				form={ p.Form }			}			disabled?={ p.Disabled }			{ p.Attributes... }		>			{ children... }		</button>	}} func (b Props) variantClasses() string {	switch b.Variant {	case VariantDestructive:		return "cn-button-variant-destructive"	case VariantOutline:		return "cn-button-variant-outline"	case VariantSecondary:		return "cn-button-variant-secondary"	case VariantGhost:		return "cn-button-variant-ghost"	case VariantLink:		return "cn-button-variant-link"	default:		return "cn-button-variant-default"	}} func (b Props) sizeClasses() string {	switch b.Size {	case SizeXs:		return "cn-button-size-xs"	case SizeSm:		return "cn-button-size-sm"	case SizeLg:		return "cn-button-size-lg"	case SizeIcon:		return "cn-button-size-icon"	case SizeIconXs:		return "cn-button-size-icon-xs"	case SizeIconSm:		return "cn-button-size-icon-sm"	case SizeIconLg:		return "cn-button-size-icon-lg"	default:		return "cn-button-size-default"	}}

Update the import paths to match your project setup.

Usage

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

@button.Button(button.Props{Variant: button.VariantOutline}) {	Button}

Cursor

Tailwind v4 switched 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:

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.

package examples import (

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

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

Outline

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

Secondary

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

Ghost

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

Destructive

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

Link

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

Icon

package examples import (

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.

package examples import (

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.

package examples import (

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.

package examples import (

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 documentation for more details.

package examples import (

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.

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

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`	-

Breadcrumb Button Group

On This Page

Installation Usage Cursor Size Default Outline Secondary Ghost Destructive Link Icon With Icon Rounded Spinner Button Group As Link API Reference Button

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.