Button

En/ Ru

Button

Button triggers an action on click.

github.com/fastygo/templ/ui

Summary

Button triggers an action on click.Button navigates when Href is set.

Use Cases

    Submit a form action

    Open a page from a primary action

    Show a destructive confirm action

    Show a low-emphasis ghost action

Semantics

    Root element is button when Href is empty

    Root element is a when Href is set

    Disabled sets native disabled on button

    Disabled link sets aria-disabled true

Example variant.default

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "default"}) {
		Primary
	}
}

Example variant.secondary

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "secondary"}) {
		Secondary
	}
}

Example variant.destructive

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "destructive"}) {
		Delete
	}
}

Example variant.outline

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "outline", Size: "sm"}) {
		Outline
	}
}

Example variant.ghost

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "ghost", Size: "sm"}) {
		Ghost
	}
}
Learn more
import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "link", Href: "/docs"}) {
		Learn more
	}
}

Example variant.unstyled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "unstyled", Class: "underline"}) {
		Custom
	}
}

Example size.sm

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Size: "sm"}) {
		Small
	}
}

Example size.lg

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Size: "lg"}) {
		Large
	}
}

Example size.icon

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Size: "icon", AriaLabel: "Settings"}) {
		+
	}
}

Example state.disabled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Disabled: true}) {
		Disabled
	}
}

Example state.submit

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Type: "submit"}) {
		Submit
	}
}
Disabled link
import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "link", Href: "/locked", Disabled: true}) {
		Disabled link
	}
}

Example state.reset

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Button(ui.ButtonProps{Variant: "outline", Type: "reset"}) {
		Reset
	}
}

API

AriaLabel · string — role: accessible-name

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension

Disabled · bool — role: state

Form · string — role: association

Href · string — role: navigation

ID · string — role: identity

Size · string — role: density; enum: default|sm|lg|icon; default: default; source: ui.button.ButtonVariants

Type · string — role: control-type; enum: button|submit|reset; default: button

Variant · string — role: appearance; enum: default|secondary|destructive|outline|ghost|link|unstyled; default: default; source: ui.button.ButtonVariants