Badge

En/ Ru

Badge

Badge shows a short status label.

github.com/fastygo/templ/ui

Summary

Badge shows a short status label.Badge uses variant and size presets.

Use Cases

    Show item status in a list

    Show a count next to a title

    Show a category tag on content

Semantics

    Root element is div

    Badge has no interactive role

    Badge content comes from children

Example variant.default

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Variant: "default"}) {
		Default
	}
}

Example variant.secondary

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Variant: "secondary"}) {
		Secondary
	}
}

Example variant.destructive

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Variant: "destructive"}) {
		Destructive
	}
}

Example variant.outline

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Variant: "outline"}) {
		Outline
	}
}

Example size.sm

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Size: "sm"}) {
		Small
	}
}

Example size.lg

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

templ Example() {
	@ui.Badge(ui.BadgeProps{Size: "lg"}) {
		Large
	}
}

API

Class · string — role: style-extension

Size · string — role: density; enum: default|sm|lg; default: default; source: ui.badge.BadgeVariants

Variant · string — role: appearance; enum: default|secondary|destructive|outline; default: default; source: ui.badge.BadgeVariants