# Badge

Small status chip. Tinted by default, solid for emphasis.

[Documentation](https://eoria.adamtrip.pt/components/badge/)

[Registry source](https://eoria.adamtrip.pt/r/badge.json)

npm dependencies: @eoria/core.

Registry dependencies: text.

```sh
npx @eoria/cli add badge
```

## Usage

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

<Badge>Pro</Badge>
<Badge variant="solid">New</Badge>
<Badge variant="secondary" size="md">Draft</Badge>
```

## Variants

| Prop      | Values                                                                  | Default   |
| --------- | ----------------------------------------------------------------------- | --------- |
| `variant` | `default` (accent tint), `solid`, `secondary`, `outline`, `destructive` | `default` |
| `size`    | `sm`, `md`                                                              | `sm`      |

String children render through the `label` slot. Anything else renders as is.

## Source

[`registry/ui/badge.tsx`](https://github.com/adamtrip-solutions/eoria/blob/main/registry/ui/badge.tsx)