# Badge

> A short status label, tinted by what it means: info, success, warning, danger or neutral.

- **Level**: atom · **Status**: stable · **Role**: status
- **Import**: `import { Badge } from "@rrios-forge/ui/atoms/badge";`
- **Source**: `packages/ui/src/atoms/badge`

Status label. `tone` carries the semantic charge (neutral, info, success, warning, danger); `emphasis` decides how loud the chip reads: `soft` (the default — a tint of the tone, for statuses in rows and headers), `outline`, and `solid` for the one status that must shout. Tone is reinforced by the visible label so colour is never the sole carrier of meaning.

## Use it for

- Avatar / badge / separator / icon → `Avatar` / `Badge` / `Separator` / `Icon`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `emphasis` | — | `soft` `outline` `solid` | `soft` | How strongly a control or chip asserts itself, quiet to loud. |
| `tone` | — | `neutral` `info` `success` `warning` `danger` | `neutral` | Which semantic colour family the element speaks in. |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-badge--playground) · frame: `/iframe.html?id=components-atoms-badge--playground&viewMode=story`
- [Tones](/?path=/story/components-atoms-badge--tones) · frame: `/iframe.html?id=components-atoms-badge--tones&viewMode=story`
- [Emphases](/?path=/story/components-atoms-badge--emphases) · frame: `/iframe.html?id=components-atoms-badge--emphases&viewMode=story`
- [Sizes](/?path=/story/components-atoms-badge--sizes) · frame: `/iframe.html?id=components-atoms-badge--sizes&viewMode=story`
- [In context](/?path=/story/components-atoms-badge--in-context) · frame: `/iframe.html?id=components-atoms-badge--in-context&viewMode=story`

## Decisions that name it

- ADR-002 — Component variants live in `variants.ts` and export their option metadata

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).