Badge

Badge é um rótulo pequeno e presentacional para status, contagens e metadados. Escolha um tone semântico para a cor carregar significado e use dot como indicador de status imediato.

Exemplos

Tons

Cada tom mapeia para um par de tokens semânticos, então os badges continuam legíveis no claro e no escuro sem nenhum estilo por tema da sua parte.

neutralaccentsuccesswarningdangerinfo

Ponto de status

dot põe um pequeno círculo preenchido antes do conteúdo. Mantenha o rótulo — o ponto repete o significado do tom, nunca substitui a palavra.

OperationalDegradedOutage

Quando usar

Use um Badge para rotular o estado do que está ao lado dele: status de um deploy, plano de uma conta, uma contagem de itens.

Prefira outro componente quando:

O rótulo é uma palavra-chave gerenciada pelo usuário (tópicos, categorias, filtros) — use Tag, feita para conjuntos e que pode ser removível.
A mensagem precisa de uma frase e de um lugar próprio — use Alert.
Você está relatando o resultado de uma ação que acabou de acontecer — use Toast.

Acessibilidade

Badge renderiza um <span> simples, sem papel ARIA: ele é lido como parte do conteúdo ao redor, que é justamente o que se quer de um rótulo preso a um elemento vizinho.
O dot é aria-hidden — é decorativo, e o significado que ele ecoa já está no texto. É por isso que o rótulo não pode ser omitido.
O tom nunca é a mensagem. "Falhou" precisa dizer Falhou; um badge vermelho só com um número não funciona para quem não distingue a cor.

API e código

Nome	Tipo	Obrigatória	Descrição
`tone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—	Semantic color tone. Default `"neutral"`.
`dot`	`boolean`	—	Show a status dot before the content.
`children`	`ReactNode`	Obrigatória	Badge content.

html

<span class="lyra-badge lyra-badge--success">
  <span class="lyra-badge__dot" aria-hidden="true"></span>
  Operacional
</span>
<span class="lyra-badge lyra-badge--warning">Degradado</span>

<lyra:badge> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`tone`	`'neutral'`	—	`accent` `danger` `info` `neutral` `success` `warning`
`dot`	`false`	—	—

blade

<lyra:badge tone="success" dot>Active</lyra:badge>