# Labels - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/rotulos`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

Three lookalikes with different roles. Picking the wrong one promises an
interaction that does not exist.

| Tag | Role | Variants |
| --- | --- | --- |
| `<echo-chip>` | INTERACTIVE: a filter that comes off, a selection that toggles. A real `button`, with hover and focus. | `filled` `soft` `outline` |
| `<echo-badge>` | STATIC: the state of something. A `span`. | `soft` `filled` |
| `<echo-pill>` | STATIC: a count or a measure beside a title. | `soft` `outline` |

```vue
<echo-chip variant="soft" intent="info">filter</echo-chip>
<echo-badge variant="soft" intent="success">active</echo-badge>
<echo-pill variant="soft" intent="warning">12</echo-pill>
```

All three take the ten intents. An outlined badge disappears over a dense table
and a filled pill competes with the row's own action, which is why the three
variant lists differ.

---

Source: `app/components/echo/{Chip,Badge,Pill}.vue`