Button — shadcn-templ

Button

Displays a button or a component that looks like a button.

Default

templ

templ ButtonDemo() {
	@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
		Button
	}
}

Variants

templ

templ ButtonVariants() {
	<div class="flex flex-wrap items-center gap-2">
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
			Default
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantSecondary, ui.ButtonSizeDefault, "", nil) {
			Secondary
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDestructive, ui.ButtonSizeDefault, "", nil) {
			Destructive
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
			Outline
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantGhost, ui.ButtonSizeDefault, "", nil) {
			Ghost
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantLink, ui.ButtonSizeDefault, "", nil) {
			Link
		}
	</div>
}

Sizes

templ

templ ButtonSizes() {
	<div class="flex flex-wrap items-center gap-2">
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeSmall, "", nil) {
			Small
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
			Default
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeLarge, "", nil) {
			Large
		}
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeIcon, "", templ.Attributes{"aria-label": "Next"}) {
			@icons.ChevronRight(icons.Props{Class: "h-4 w-4"})
		}
	</div>
}

With icon

templ

templ ButtonWithIcon() {
	@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
		@icons.Mail(icons.Props{Class: "mr-2 h-4 w-4"})
		Login with Email
	}
}

Loading

templ

templ ButtonLoading() {
	@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", templ.Attributes{"disabled": true}) {
		@icons.Loader(icons.Props{Class: "mr-2 h-4 w-4 animate-spin"})
		Please wait
	}
}