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

<ComponentPreview name="p-badge-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

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

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/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: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

<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

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

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

## 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>
}
```

## API Reference

This is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.

### Badge

A badge component with variant and size options.

| Prop      | Type                                                                                                    | Default     | Description                                      |
| --------- | ------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------ |
| `variant` | `"default" \| "destructive" \| "error" \| "info" \| "outline" \| "secondary" \| "success" \| "warning"` | `"default"` | Controls the badge styling and color scheme      |
| `size`    | `"default" \| "sm" \| "lg"`                                                                             | `"default"` | Controls the badge size                          |
| `render`  | `React.ReactElement`                                                                                    | -           | Render as a different element (e.g., Link)       |

## Examples

### Outline

<ComponentPreview name="p-badge-2" />

### Secondary

<ComponentPreview name="p-badge-3" />

### Destructive

<ComponentPreview name="p-badge-4" />

### Info

<ComponentPreview name="p-badge-5" />

### Success

<ComponentPreview name="p-badge-6" />

### Warning

<ComponentPreview name="p-badge-7" />

### Error

<ComponentPreview name="p-badge-8" />

### Small

<ComponentPreview name="p-badge-9" />

### Large

<ComponentPreview name="p-badge-10" />

### With Icon

<ComponentPreview name="p-badge-11" />

### With Link

<ComponentPreview name="p-badge-12" />

### With Count

<ComponentPreview name="p-badge-13" />