---
id: "packages/active-ui/badge"
title: "Badge"
description: "A short label beside other content, for a status, a count or a category, in six variants."
url: "/packages/active-ui/badge"
locale: "en"
revision: "a3d02430e2ecbf03"
---

# Badge

A badge is a short label that qualifies what is next to it: "On", "Overdue", "12 new", a category.
It is not a button. For the status of a record with a fixed set of tones (success, warning,
danger), the composed [`StatusBadge`](/packages/active-ui/status-badge) maps a status to its tone.

**Example: Variants, an icon and a link**

Client: Runs entirely in your browser. Source: `examples/ui/badge.tsx`.

```tsx
// apps/docs/examples/ui/badge.tsx
'use client';

import {BadgeCheckIcon, ExternalLinkIcon} from 'lucide-react';

import {Badge} from '@workspace/active-ui/components/primitives/badge';

/**
 * A short label beside other content: a status, a count, a category. Six
 * variants, an icon beside the text, and a badge that is a link.
 */
export default function BadgeExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="destructive">Overdue</Badge>
        <Badge variant="ghost">Ghost</Badge>
        <Badge variant="link">Link style</Badge>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <Badge variant="secondary">
          <BadgeCheckIcon data-icon="inline-start" aria-hidden />
          Verified
        </Badge>
        <Badge variant="outline" className="tabular-nums">
          12 new
        </Badge>
        <Badge variant="outline" render={<a href="#badge-api" />}>
          API reference
          <ExternalLinkIcon data-icon="inline-end" aria-hidden />
        </Badge>
      </div>
    </div>
  );
}
```

## Usage

```tsx
import {Badge} from '@workspace/active-ui/components/primitives/badge';

<Badge variant="secondary">Verified</Badge>;
```

## Variants

- `default`: the primary colour, for the one label that must stand out;
- `secondary` and `outline`: quieter labels;
- `destructive`: a problem, in the danger tone (the text reaches AA on its tinted fill);
- `ghost`: no fill until hovered, for a label inside a dense row;
- `link`: looks like a link.

An icon beside the text takes `data-icon="inline-start"` or `"inline-end"`, as on a
[button](/packages/active-ui/button). `render` makes the badge another element, such as a link;
then it gets a hover state. `badgeVariants({variant})` returns the classes for an element of your
own.

## What your application provides

- The text, short: one or two words, or a number.
- Meaning beyond colour: a badge's colour supports its text and is never the only signal.

## Accessibility

A badge is a `<span>` read as part of the surrounding text. A number alone ("12") may need context:
write "12 new" or give the surrounding element a name that includes it.

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "destructive" \| "ghost" \| "link" \| "outline" \| "secondary" \| null` | no | The emphasis: `default` (the primary colour), `secondary`, `outline`, `destructive` (a problem, in the danger tone), `ghost` and `link`. |
| `render` | `ComponentRenderFn<HTMLProps, {}> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |

### Other exports

**badgeVariants**: `(props?: (ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; outline: string; ghost: string; link: string; }; }> & ClassProp) \| undefined) => string`

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Badge documentation of shadcn/ui (MIT licence) to this
> package; see [Third-party notices](/third-party-notices).