Primary
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonPrimary() {
@button.Button() {
Primary
}
}
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonDefault() {
@button.Button() {
Button
}
}
Installation
templui add buttonExamples
Sizes
package showcase
import "github.com/axzilla/templui/internal/components/button"
import "github.com/axzilla/templui/internal/components/icon"
templ ButtonSizes() {
<div class="flex flex-wrap items-center gap-4">
@button.Button(button.Props{
Size: button.SizeSm,
Variant: button.VariantSecondary,
}) {
Small
}
@button.Button(button.Props{
Variant: button.VariantSecondary,
}) {
Default
}
@button.Button(button.Props{
Size: button.SizeLg,
Variant: button.VariantSecondary,
}) {
Large
}
@button.Button(button.Props{
Size: button.SizeIcon,
Variant: button.VariantSecondary,
}) {
// Default icon size in @button is 16x16
// Use Class: "size-6" for larger icons
@icon.ChevronRight()
}
</div>
}
Primary
Secondary
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonSecondary() {
@button.Button(button.Props{
Variant: button.VariantSecondary,
}) {
Secondary
}
}
Destructive
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonDestructive() {
@button.Button(button.Props{
Variant: button.VariantDestructive,
}) {
Destructive
}
}
Outline
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonOutline() {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Outline
}
}
Ghost
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonGhost() {
@button.Button(button.Props{
Variant: button.VariantGhost,
}) {
Ghost
}
}
Link
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonLink() {
@button.Button(button.Props{
Variant: button.VariantLink,
}) {
Link
}
}
Icon
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/icon"
)
templ ButtonIcon() {
@button.Button(button.Props{
Size: button.SizeIcon,
Variant: button.VariantSecondary,
}) {
// Default icon size in @button is 16x16
// Use Class: "size-6" for larger icons
@icon.ChevronRight(icon.Props{Size: 16})
}
}
With Icon
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/icon"
)
templ ButtonWithIcon() {
@button.Button(button.Props{
Class: "flex gap-2 items-center",
Variant: button.VariantSecondary,
}) {
// Default icon size in @button is 16x16
// Use Class: "size-6" for larger icons
@icon.Mail()
Login with Email
}
}
Loading
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/icon"
)
templ ButtonLoading() {
@button.Button(button.Props{
Disabled: true,
Class: "flex items-center gap-2",
}) {
@icon.LoaderCircle(icon.Props{
Class: "animate-spin",
})
Please wait
}
}
API Reference
Required parameter
Hover for description
Button
Interactive button component with multiple variants and states.
| Name | Type | Default |
|---|---|---|
Unique identifier for the button element. | | - |
Additional CSS classes to apply to the button. | | - |
Additional HTML attributes to apply to the button element. | | - |
Visual style variant. Options: 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link'. | | |
Button size. Options: 'default', 'sm', 'lg', 'icon'. | | |
Whether the button should take full width of its container. | | |
URL for link buttons. When provided, renders an anchor tag instead of button. | | - |
Target attribute for link buttons (e.g., '_blank'). | | - |
Whether the button is disabled and non-interactive. | | |
HTML button type. Options: 'button', 'submit', 'reset'. | | |