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

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

export function BadgeDemo() {
  return <Badge>Badge</Badge>;
}
```

## Installation

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

## Usage

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

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

## Examples

### Variants

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

export function BadgeDemo() {
  return (
    <div className="flex flex-col items-center gap-2 sm:flex-row sm:flex-wrap">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Destructive</Badge>
      <Badge variant="error">Error</Badge>
    </div>
  );
}
```

### Sizes

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

export function BadgeDemo() {
  return (
    <div className="flex items-center gap-2">
      <Badge size="sm">Small</Badge>
      <Badge size="default">Default</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
}
```

### With icon

```tsx
import { IconBookmark, IconRosetteDiscountCheck } from "@tabler/icons-react";

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

export function BadgeDemo() {
  return (
    <div className="flex items-center gap-2">
      <Badge variant="success">
        <IconRosetteDiscountCheck />
        Verified
      </Badge>
      <Badge variant="outline">
        Bookmark
        <IconBookmark />
      </Badge>
    </div>
  );
}
```

## API Reference

<ApiReferenceAccordion
  type={{
    variant: {
      description: "The variant of the badge.",
      type: "'primary' | 'secondary' | 'outline' | 'info' | 'success' | 'warning' | 'danger' | 'error'",
      default: `'primary'`,
    },
    size: {
      description: "The size of the badge.",
      type: "'sm' | 'default' | 'lg'",
      default: `'default'`,
    },
  }}
/>