---
title: Badge
description: Displays a badge or a component that looks like a badge.
---

```templ
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

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add badge
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="badge" title="components/badge/badge.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

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

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

## Variants

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

```templ
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.

```templ
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.

```templ
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.

```templ
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.

```templ
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`                                                                                                    | -                |