---
title: "Badge"
description: "Compact status label with color + size variants."
section: "Libraries"
group: "UI components"
order: 501
---

## Usage

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

<Badge variant="default">New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="destructive">Error</Badge>
```

## Exports

### `Badge`

Compact label for status or counts.

```ts
Badge(props: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): JSX.Element
```

**Props**

| Prop       | Type                                                                                               | Default     | Description |
| ---------- | -------------------------------------------------------------------------------------------------- | ----------- | ----------- |
| `variant?` | `"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined` | `"default"` |             |

### `badgeVariants`

cva variant builder for badge classNames.

```ts
badgeVariants(config?: { variant?: BadgeVariant; size?: BadgeSize; className?: string }): string
```