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
}
}
templui add button
Primary
package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ButtonPrimary() {
@button.Button() {
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>
}