Navigation: [/sitemap.md](/sitemap.md)

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

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'badge' }}
---
import { Badge } from "@/components/ui/badge"
import { Icon } from "@/components/ui/icon"
---

<div class="flex flex-col items-center gap-2">
  <div class="flex w-full flex-wrap gap-2">
    <Badge>Badge</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="ghost">Ghost</Badge>
    <Badge as="a" variant="link" href="/">Link</Badge>
  </div>
  <div class="flex w-full flex-wrap gap-2">
    <Badge variant="secondary">
      <Icon name="badge-check" class="size-3" />
      Verified
    </Badge>
    <Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
      8
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      variant="destructive"
    >
      99
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      variant="outline"
    >
      20+
    </Badge>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/badge
```

## Usage

```ts
import { Badge } from "@/components/ui/badge"
```

```astro
<Badge variant="default">Badge</Badge>
```

### Link

Use the polymorphic `as` prop to render the badge as a link element.

```astro
---
import { Badge } from "@/components/ui/badge"
---

<Badge as="a" href="/">Badge</Badge>
```

### Polymorphic

`Badge` is strict polymorphic. Pass `as` to change the rendered element and
use attributes for that element.

```astro
<Badge as="button" type="button">Action</Badge>
<Badge as="a" href="/docs/">Docs</Badge>
```

## Notes

- Use variants first before adding custom classes.
- `Badge` works well for status labels, counts, and small inline metadata.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/badge) for more information on props.