Badge
Badge component is used to display a small amount of information in a visual style.
TailwindCSS
Badge
package showcase
import "github.com/axzilla/templui/components"
templ BadgeDefault() {
@components.Badge() {
Badge
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
Usage
@components.Badge(components.BadgeProps{...})Examples
Primary
Badge
package showcase
import "github.com/axzilla/templui/components"
templ BadgeDefault() {
@components.Badge() {
Badge
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
Examples
Secondary
Secondary
package showcase
import "github.com/axzilla/templui/components"
templ BadgeSecondary() {
@components.Badge(components.BadgeProps{
Variant: components.BadgeVariantSecondary,
}) {
Secondary
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
Examples
Outline
Outline
package showcase
import "github.com/axzilla/templui/components"
templ BadgeOutline() {
@components.Badge(components.BadgeProps{
Variant: components.BadgeVariantOutline,
}) {
Outline
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
Examples
Destructive
Destructive
package showcase
import "github.com/axzilla/templui/components"
templ BadgeDestructive() {
@components.Badge(components.BadgeProps{
Variant: components.BadgeVariantDestructive,
}) {
Destructive
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}
Examples
With Icon
With Icon
package showcase
import (
"github.com/axzilla/templui/components"
"github.com/axzilla/templui/icons"
)
templ BadgeWithIcon() {
@components.Badge(components.BadgeProps{
Class: "flex gap-1 items-center"},
) {
@icons.Rocket(icons.IconProps{Size: 14})
With Icon
}
}
package components
import "github.com/axzilla/templui/utils"
type BadgeVariant string
const (
BadgeVariantDefault BadgeVariant = "default"
BadgeVariantSecondary BadgeVariant = "secondary"
BadgeVariantDestructive BadgeVariant = "destructive"
BadgeVariantOutline BadgeVariant = "outline"
)
type BadgeProps struct {
ID string
Class string
Attributes templ.Attributes
Variant BadgeVariant
}
templ Badge(props ...BadgeProps) {
{{ var p BadgeProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={
utils.TwMerge(
"inline-flex items-center gap-2",
"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
p.variantClasses(),
p.Class,
),
}
{ p.Attributes... }
>
{ children... }
</div>
}
func (b BadgeProps) variantClasses() string {
switch b.Variant {
case BadgeVariantDestructive:
return "border-transparent bg-destructive text-destructive-foreground"
case BadgeVariantOutline:
return "text-foreground border-border"
case BadgeVariantSecondary:
return "border-transparent bg-secondary text-secondary-foreground"
default:
return "border-transparent bg-primary text-primary-foreground"
}
}