# Badge

> A compact pill communicating a short status, label, or count inline with surrounding content.

```ts
import { Badge } from "@sdxc/ui";
```

Renders a single-line pill host, colored and shaped through the
`data-color` and `data-variant` attribute contract: `"default"` fills the
pill solid, `"secondary"` tints the fill, `"outline"` keeps just a border.

## Examples

```tsx
<Badge>{t("badge.new")}</Badge>
```

```tsx
<Badge color="success" variant="secondary">
	<Badge.Icon><CheckIcon /></Badge.Icon>
	<Badge.Text>{t("badge.active")}</Badge.Text>
</Badge>
```

```tsx
<Badge color="danger" variant="outline">{t("badge.failed")}</Badge>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `variant?` | `"default" \| "secondary" \| "outline"` | Visual weight. Defaults to DEFAULT_VARIANT. |

Also accepts everything in `TagProps<"span">`.


### Badge.Icon

Renders the badge's leading or trailing glyph slot: an inert, shrink-proof `<span>` sized to hold a single small icon and hidden from assistive technology, since Badge.Text carries the badge's meaning.

Also accepts everything in `TagProps<"span">`.


### Badge.Text

Renders the badge's label slot: a `<span>` with its line height collapsed to one, keeping short label text vertically centered inside the pill.

Also accepts everything in `TagProps<"span">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |
| `Variant` | `"default" \| "secondary" \| "outline"` | Visual weight the badge renders with: a solid fill, a tinted fill, or a transparent chip with just an outline. |