Badge

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

BadgeSecondaryDestructiveOutline

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge"

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge" templ BadgeDemo() {	<div class="flex w-full flex-wrap justify-center gap-2">		@badge.Badge() {			Badge		}		@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {			Secondary		}		@badge.Badge(badge.Props{Variant: badge.VariantDestructive}) {			Destructive		}		@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {			Outline		}	</div>}

Installation

shadcn-templ add badge

Copy and paste the following code into your project.

components/badge/badge.templ

package badge import "github.com/axadrn/shadcn-templ/v2/utils" type Variant string const (	VariantDefault     Variant = "default"	VariantSecondary   Variant = "secondary"	VariantDestructive Variant = "destructive"	VariantOutline     Variant = "outline"	VariantGhost       Variant = "ghost"	VariantLink        Variant = "link") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    Variant	Href       string} templ Badge(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Href != "" {		<a			href={ templ.SafeURL(p.Href) }			if p.ID != "" {				id={ p.ID }			}			data-slot="badge"			data-variant={ string(p.variant()) }			class={ badgeClasses(p) }			{ p.Attributes... }		>			{ children... }		</a>	} else {		<span			if p.ID != "" {				id={ p.ID }			}			data-slot="badge"			data-variant={ string(p.variant()) }			class={ badgeClasses(p) }			{ p.Attributes... }		>			{ children... }		</span>	}} // 1:1 base/ui/badge.tsx: structure lives here, the look comes from the// active style-*.css via the cn-badge-* classes.const baseClasses = "cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none" func badgeClasses(p Props) string {	return utils.CN(baseClasses, p.variantClasses(), p.Class)} func (p Props) variant() Variant {	if p.Variant == "" {		return VariantDefault	}	return p.Variant} func (p Props) variantClasses() string {	switch p.variant() {	case VariantSecondary:		return "cn-badge-variant-secondary"	case VariantDestructive:		return "cn-badge-variant-destructive"	case VariantOutline:		return "cn-badge-variant-outline"	case VariantGhost:		return "cn-badge-variant-ghost"	case VariantLink:		return "cn-badge-variant-link"	default:		return "cn-badge-variant-default"	}}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/badge"

@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {	Badge}

Variants

Use the Variant prop to change the variant of the badge.

DefaultSecondaryDestructiveOutlineGhost

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge"

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge" templ BadgeVariants() {	<div class="flex flex-wrap gap-2">		@badge.Badge() {			Default		}		@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {			Secondary		}		@badge.Badge(badge.Props{Variant: badge.VariantDestructive}) {			Destructive		}		@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {			Outline		}		@badge.Badge(badge.Props{Variant: badge.VariantGhost}) {			Ghost		}	</div>}

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

VerifiedBookmark

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/badge"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ BadgeIcon() {	<div class="flex flex-wrap gap-2">		@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {			@icon.BadgeCheck(icon.Props{Attributes: templ.Attributes{"data-icon": "inline-start"}})			Verified		}		@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {			Bookmark			@icon.Bookmark(icon.Props{Attributes: templ.Attributes{"data-icon": "inline-end"}})		}	</div>}

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner.

DeletingGenerating

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/badge"	"github.com/axadrn/shadcn-templ/v2/components/spinner") templ BadgeSpinner() {	<div class="flex flex-wrap gap-2">		@badge.Badge(badge.Props{Variant: badge.VariantDestructive}) {			@spinner.Spinner(spinner.Props{Attributes: templ.Attributes{"data-icon": "inline-start"}})			Deleting		}		@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {			Generating			@spinner.Spinner(spinner.Props{Attributes: templ.Attributes{"data-icon": "inline-end"}})		}	</div>}

Link

Set the Href prop to render the badge as a link.

Open Link

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/badge"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ BadgeLink() {	@badge.Badge(badge.Props{Href: "#link"}) {		Open Link		@icon.ArrowUpRight(icon.Props{Attributes: templ.Attributes{"data-icon": "inline-end"}})	}}

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

BlueGreenSkyPurpleRed

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge"

package examples import "github.com/axadrn/shadcn-templ/v2/components/badge" templ BadgeColors() {	<div class="flex flex-wrap gap-2">		@badge.Badge(badge.Props{Class: "bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300"}) {			Blue		}		@badge.Badge(badge.Props{Class: "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300"}) {			Green		}		@badge.Badge(badge.Props{Class: "bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300"}) {			Sky		}		@badge.Badge(badge.Props{Class: "bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300"}) {			Purple		}		@badge.Badge(badge.Props{Class: "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300"}) {			Red		}	</div>}

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

Prop	Type	Default
`Variant`	`VariantDefault \| VariantSecondary \| VariantDestructive \| VariantOutline \| VariantGhost \| VariantLink`	`VariantDefault`
`Href`	`string`	-
`Class`	`string`	-

Avatar Breadcrumb

On This Page

Installation Usage Variants With Icon With Spinner Link Custom Colors API Reference Badge

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.