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
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.VariantOutline,
}) {
@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",
}) {
@icon.Mail(icon.Props{Size: 16})
Login with Email
}
}
Loading
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/spinner"
)
templ ButtonLoading() {
@button.Button(button.Props{
Disabled: true,
Class: "flex items-center gap-2",
}) {
@spinner.Spinner(spinner.Props{
Size: spinner.SizeSm,
Color: "text-primary-foreground",
})
Please wait
}
}
HTMX Loading (5s)
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/spinner"
)
templ ButtonHtmxLoading() {
<div class="flex flex-wrap items-center gap-2">
<form
class="flex flex-col gap-2"
hx-post="/docs/button/htmx-loading"
hx-trigger="submit"
hx-indicator="#spinner"
hx-disabled-elt="find button"
>
@button.Button(button.Props{
Type: button.TypeSubmit,
Class: "flex items-center gap-2",
}) {
<span id="spinner" class="htmx-indicator hidden [&.htmx-request]:inline-flex">
@spinner.Spinner(spinner.Props{
Size: spinner.SizeSm,
Color: "text-primary-foreground",
})
</span>
Submit
}
</form>
<div id="toast-container"></div>
</div>
}
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: 'icon' for icon-only buttons. | | - |
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'. | | |