# Badge

> Inline status chip in 3 variants, 6 colors and 2 sizes, with a dot or an icon. Every variant uses an ink measured for its fill.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/badge

## Install

```bash
npx @entrepta/cli@latest add badge
```

Files: `primitives/badge.tsx`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `icon-lib`.

## Usage

```tsx
import { Badge } from "@/components/entrepta/badge"
import { CheckIcon, GitBranchIcon } from "@phosphor-icons/react"

<Badge variant="soft" color="success" icon={CheckIcon}>passing</Badge>
<Badge variant="outline" color="brand" icon={GitBranchIcon}>main</Badge>
<Badge variant="solid" color="brand">FEATURED</Badge>
<Badge variant="soft" color="success" dot>open to work</Badge>
<Badge variant="outline" color="error">deprecated</Badge>
<Badge variant="soft" color="warning" dot>partial</Badge>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"solid" \| "soft" \| "outline"` | "soft" | Fill style |
| `color` | `"neutral" \| "brand" \| "success" \| "warning" \| "error" \| "info"` | "neutral" | Semantic color token |
| `size` | `"sm" \| "md"` | "md" | Height and padding |
| `dot` | `boolean` | false | Renders a colored status dot before the label |
| `icon` | `Icon \| ReactElement` | - | A Phosphor icon, or an icon element, before the label, sized to the badge. Wins over dot |