package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/icon"
)
templ ButtonDefault() {
<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
templui add button
import "github.com/templui/templui/components/button"
Examples
Size
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/icon"
)
templ ButtonSizes() {
<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 showcase
import "github.com/templui/templui/components/button"
templ ButtonPrimary() {
@button.Button() {
Button
}
}
Outline
package showcase
import "github.com/templui/templui/components/button"
templ ButtonOutline() {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Outline
}
}
Secondary
package showcase
import "github.com/templui/templui/components/button"
templ ButtonSecondary() {
@button.Button(button.Props{
Variant: button.VariantSecondary,
}) {
Secondary
}
}
Ghost
package showcase
import "github.com/templui/templui/components/button"
templ ButtonGhost() {
@button.Button(button.Props{
Variant: button.VariantGhost,
}) {
Ghost
}
}
Destructive
package showcase
import "github.com/templui/templui/components/button"
templ ButtonDestructive() {
@button.Button(button.Props{
Variant: button.VariantDestructive,
}) {
Destructive
}
}
Link
package showcase
import "github.com/templui/templui/components/button"
templ ButtonLink() {
@button.Button(button.Props{
Variant: button.VariantLink,
}) {
Link
}
}
Icon
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/icon"
)
templ ButtonIcon() {
@button.Button(button.Props{
Variant: button.VariantOutline,
Size: button.SizeIcon,
}) {
@icon.CircleFadingArrowUp()
}
}
With Icon
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/icon"
)
templ ButtonWithIcon() {
@button.Button(button.Props{
Variant: button.VariantOutline,
Size: button.SizeSm,
}) {
@icon.GitBranch()
New Branch
}
}
Rounded
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/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
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/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>
}
API Reference
Required parameter
Hover for description
Button
Interactive button component with multiple variants and sizes.
| Name | Type | Default |
|---|---|---|
Visual style. Options: 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link'. | | |
Button size. Options: 'default', 'xs', 'sm', 'lg', 'icon', 'icon-xs', 'icon-sm', 'icon-lg'. | | |
Whether the button stretches to the full width of its container. | | |
URL for link buttons. When set, renders an anchor instead of a button. | | - |
Target attribute for link buttons (e.g. '_blank'). | | - |
Whether the button is disabled and non-interactive. | | |
HTML button type. Options: 'button', 'submit', 'reset'. | | |
Associates the button with a form by id. | | - |
Optional HTML id for the element. | | - |
Additional CSS classes to apply. | | - |
Additional HTML attributes to apply. | | - |