Índice da vitrine
Início
Ações
Formulários
Navegação
Autenticação
Retorno
Conteúdo
Rótulos
Chip, badge e pill: três marcas parecidas que respondem a perguntas diferentes - uma clica, duas apenas dizem.
Chips
O rótulo interativo, para filtro e remoção: hover e foco existem porque o clique é real.
.es-chip--filled
.es-chip--soft
.es-chip--outline
Badges
O rótulo estático de contagem ou estado: sem hover e sem foco, porque não é interativo.
.es-badge--soft
.es-badge--filled
Pills
O rótulo estático arredondado, o meio-termo entre badge e chip.
.es-pill--soft
.es-pill--outline
Qual dos três
Os três lado a lado, no mesmo tamanho: a diferença não é visual, é de papel.
| Amostra | Tag | Quando usar |
|---|---|---|
<echo-chip> | O leitor CLICA: filtro que sai, seleção que alterna. É um `button` de verdade e tem foco. | |
| Ativo | <echo-badge> | Estado de alguma coisa, dito pela página. Não clica, então não tem hover nem foco. |
| 12 | <echo-pill> | Contagem ou medida ao lado de um título. Mesma matéria do badge, forma mais estreita. |
Para agentes de IA
Especificação desta página
Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.
/agents/labels.md