Button

Button

Trigger actions and events with customizable button components.

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonDefault() {
	@popui.Button() {
		Default Button
	}
}

Variants

Buttons come in different variants to communicate different actions: default, primary, secondary, danger, and transparent.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/icons"
)

templ ButtonVariants() {
	<div class="flex gap-2">
		@popui.Button() {
			@icons.User()
			Default
		}
		@popui.Button(props.Button{Variant: "primary"}) {
			@icons.Download()
			Primary
		}
		@popui.Button(props.Button{Variant: "secondary"}) {
			@icons.Settings()
			Secondary
		}
		@popui.Button(props.Button{Variant: "danger"}) {
			@icons.Delete()
			Danger
		}
		@popui.Button(props.Button{Variant: "transparent"}) {
			@icons.Lock()
			Transparent
		}
		@popui.Button(props.Button{Size: "icon"}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: "primary", Size: "icon"}) {
			@icons.Add()
		}
		@popui.Button(props.Button{Variant: "secondary", Size: "icon"}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: "danger", Size: "icon"}) {
			@icons.Delete()
		}
		@popui.Button(props.Button{Variant: "transparent", Size: "icon"}) {
			@icons.Lock()
		}
	</div>
}

Sizes

Buttons are available in small (sm), default (md), and icon sizes.

1234567891011121314151617181920212223
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonSizes() {
	<div class="flex gap-2 items-center">
		@popui.Button(props.Button{Variant: "primary", Size: "sm"}) {
			Small
		}
		@popui.Button(props.Button{Variant: "primary"}) {
			Default
		}
		@popui.Button(props.Button{Variant: "primary", Size: "lg"}) {
			Large
		}
		@popui.Button(props.Button{Variant: "primary", Size: "icon"}) {
			+
		}
	</div>
}

With Content

Buttons can contain any content including text, icons, or combinations.

123456789101112131415161718
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonWithIcons() {
	<div class="flex gap-2">
		@popui.Button(props.Button{Variant: "primary"}) {
			Save
		}
		@popui.Button(props.Button{Variant: "danger"}) {
			@icons.Delete()
            Delete
		}
	</div>
}

Disabled State

Buttons can be disabled to prevent user interaction.

1234567891011121314151617181920
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonDisabled() {
	<div class="flex gap-2">
		@popui.Button(props.Button{Disabled: true}) {
			Disabled Default
		}
		@popui.Button(props.Button{Variant: "primary", Disabled: true}) {
			Disabled Primary
		}
		@popui.Button(props.Button{Variant: "danger", Disabled: true}) {
			Disabled Danger
		}
	</div>
}

Anchor Button

Use AnchorButton for links styled as buttons.

Visit Website Open in New Tab

123456789101112131415161718192021222324
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ ButtonAnchor() {
	<div class="flex gap-2">
		@popui.AnchorButton(props.AnchorButton{
			Href:    "/docs",
			Variant: "primary",
		}) {
			Visit Website
		}
		@popui.AnchorButton(props.AnchorButton{
			Href:    "/docs",
			Variant: "secondary",
			Target:  "_blank",
		}) {
			Open in New Tab
		}
	</div>
}

API Reference

Standard button component for triggering actions.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the button element
`Class`	`string`	-	Additional CSS classes to merge with button styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Type`	`string`	-	Button type: 'button', 'submit', or 'reset'
`Variant`	`string`	-	Visual style: 'primary', 'secondary', 'danger', or 'transparent'
`Size`	`string`	`md`	Button size: 'sm', 'md' (default), or 'icon'
`Disabled`	`bool`	`false`	Disables the button
`Autofocus`	`bool`	`false`	Automatically focuses the button on page load
`Name`	`string`	-	Name attribute for form submission
`Value`	`string`	-	Value attribute for form submission
`Form`	`string`	-	Associates button with a form by ID

AnchorButton

Anchor element styled as a button for navigation.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the anchor element
`Class`	`string`	-	Additional CSS classes to merge with button styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Variant`	`string`	-	Visual style: 'primary', 'secondary', 'danger', or 'transparent'
`Size`	`string`	`md`	Button size: 'sm', 'md' (default), or 'icon'
`Href`	`templ.SafeURL`	-	URL destination for the link
`Target`	`string`	-	Target attribute: '_blank', '_self', etc.
`Rel`	`string`	-	Rel attribute for link relationship
`Download`	`bool`	`false`	Triggers download of the linked resource