# Badge (/docs/components/badge)



<ComponentPreview name="badge-demo" />

## Overview [#overview]

Use a badge to display a short label, status, count, category, or metadata.

Badges should be compact and easy to scan. They are useful in tables, cards, headers, filters, and lists. Do not use a badge for long messages or primary actions.

## Anatomy [#anatomy]

A badge is usually a small inline container with text and optional icon. It can also render another element, such as a link, when the badge needs to be interactive.

## Variants [#variants]

Choose the variant by meaning. Outline is neutral, secondary is low emphasis, destructive is for dangerous state, and state variants such as info, success, warning, and error should match the status being shown.

## Accessibility [#accessibility]

Use readable text, not color alone. If a badge is a link, make sure the destination is clear from the visible text or surrounding context.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add badge
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Import the following variables into your CSS file
      </Step>

      ```css
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
        --color-info: var(--info);
        --color-info-foreground: var(--info-foreground);
        --color-success: var(--success);
        --color-success-foreground: var(--success-foreground);
        --color-warning: var(--warning);
        --color-warning-foreground: var(--warning-foreground);
      }

      :root {
        --destructive-foreground: oklch(0.505 0.213 27.518);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.488 0.243 264.376);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.508 0.118 165.612);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.555 0.163 48.998);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.707 0.165 254.624);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.765 0.177 163.223);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.828 0.189 84.429);
      }
      ```

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

      <ComponentSource name="badge" title="components/ui/badge.tsx" />

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

## Usage [#usage]

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

```tsx
<Badge>Badge</Badge>
```

## Link [#link]

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a badge. Here's an example of a link that looks like a badge.

```tsx
import Link from "next/link"

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

export function LinkAsBadge() {
  return <Badge render={<Link href="/pricing" />}>New</Badge>
}
```

## Examples [#examples]

The examples show visual variants, sizes, icon support, and link rendering.

### Outline [#outline]

<ComponentPreview name="badge-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Secondary [#secondary]

<ComponentPreview name="badge-secondary" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Destructive [#destructive]

<ComponentPreview name="badge-destructive" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Info [#info]

<ComponentPreview name="badge-info" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Success [#success]

<ComponentPreview name="badge-success" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Warning [#warning]

<ComponentPreview name="badge-warning" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Error [#error]

<ComponentPreview name="badge-error" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Small [#small]

<ComponentPreview name="badge-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Large [#large]

<ComponentPreview name="badge-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Icon [#with-icon]

<ComponentPreview name="badge-with-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Link [#with-link]

<ComponentPreview name="badge-with-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />