Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Labels
Chip, badge and pill: three lookalikes answering different questions - one is clicked, two only state.
Chips
The interactive label, for filtering and removal: hover and focus exist because the click is real.
.es-chip--filled
.es-chip--soft
.es-chip--outline
Badges
The static label for counts and states: no hover and no focus, because it is not interactive.
.es-badge--soft
.es-badge--filled
Pills
The static rounded label, the middle ground between badge and chip.
.es-pill--soft
.es-pill--outline
Which of the three
The three side by side, at the same size: what separates them is not the look, it is the role.
| Sample | Tag | When to use it |
|---|---|---|
<echo-chip> | The reader CLICKS it: a filter that comes off, a selection that toggles. It is a real `button` and it takes focus. | |
| Active | <echo-badge> | The state of something, stated by the page. It is not clicked, so it has neither hover nor focus. |
| 12 | <echo-pill> | A count or a measure beside a title. The same material as the badge, in a narrower shape. |
For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/labels.md