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

<ComponentExample src="/components/examples/badge/demo.tsx">
  <BadgeDemo />
</ComponentExample>

## Installation

```bash
npx shadcn-ui add badge
```

<Accordion type="single" collapsible>
  <AccordionItem value="manual-installation">
    <AccordionTrigger>Manual Installation</AccordionTrigger>
    <AccordionContent>

1. Copy and paste the following code into your project.

<ComponentSource src="/components/ui/badge.tsx" />

<Callout>
  This is the `<Badge />` primitive. You can place it in a file at
  `components/ui/badge.tsx`.
</Callout>

    </AccordionContent>

  </AccordionItem>
</Accordion>

## Usage

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

```tsx
<Badge variant="outline">Badge</Badge>
```

### Link

You can use the `badgeVariants` helper to create a link that looks like a badge.

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

```tsx
<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>
```

## Examples

### Default

<ComponentExample src="/components/examples/badge/demo.tsx">
  <BadgeDemo />
</ComponentExample>

---

### Secondary

<ComponentExample src="/components/examples/badge/secondary.tsx">
  <BadgeSecondary />
</ComponentExample>

---

### Outline

<ComponentExample src="/components/examples/badge/outline.tsx">
  <BadgeOutline />
</ComponentExample>

---

### Destructive

<ComponentExample src="/components/examples/badge/destructive.tsx">
  <BadgeDestructive />
</ComponentExample>