Primary
Badge
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeDefault() {
@badge.Badge() {
Badge
}
}
Badge
Badge component is used to display a small amount of information in a visual style.
Source Tailwind CSS
Badge
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeDefault() {
@badge.Badge() {
Badge
}
}
Installation
templui add badgeimport "github.com/templui/templui/components/badge"Examples
Secondary
Secondary
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeSecondary() {
@badge.Badge(badge.Props{
Variant: badge.VariantSecondary,
}) {
Secondary
}
}
Outline
Outline
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeOutline() {
@badge.Badge(badge.Props{
Variant: badge.VariantOutline,
}) {
Outline
}
}
Destructive
Destructive
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeDestructive() {
@badge.Badge(badge.Props{
Variant: badge.VariantDestructive,
}) {
Destructive
}
}
With Icon
With Icon
package showcase
import (
"github.com/templui/templui/components/badge"
"github.com/templui/templui/components/icon"
)
templ BadgeWithIcon() {
@badge.Badge(badge.Props{
Class: "flex gap-2 items-center",
}) {
// Default icon size in @badge is 16x16
// Use Class: "size-6" for larger icons
@icon.Rocket()
With Icon
}
}
API Reference
Required parameter
Hover for description
Badge
Badge component for displaying small pieces of information.
| Name | Type | Default |
|---|---|---|
Unique identifier for the badge element. | | - |
Additional CSS classes to apply to the badge. | | - |
Additional HTML attributes to apply to the badge element. | | - |
Visual style variant. Options: 'default', 'secondary', 'destructive', 'outline'. | | |
