Button

package showcase

import "github.com/templui/templui/components/button"
import "github.com/templui/templui/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>
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonPrimary() {
	@button.Button() {
		Primary
	}
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonSecondary() {
	@button.Button(button.Props{
		Variant: button.VariantSecondary,
	}) {
		Secondary
	}
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonDestructive() {
	@button.Button(button.Props{
		Variant: button.VariantDestructive,
	}) {
		Destructive
	}
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonOutline() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
	}) {
		Outline
	}
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonGhost() {
	@button.Button(button.Props{
		Variant: button.VariantGhost,
	}) {
		Ghost
	}
}

package showcase

import "github.com/templui/templui/components/button"

templ ButtonLink() {
	@button.Button(button.Props{
		Variant: button.VariantLink,
	}) {
		Link
	}
}

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/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{Class: "size-4"})
	}
}

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/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
	}
}

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/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
	}
}