Badge

Etiqueta de status ou categoria (Nuxt UI) — cor semântica. O status de toda linha da index.

Componente base do Nuxt UI (UBadge), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.

O Badge é a etiqueta curta de status e categoria. Na index, todo status é um badge com cor semântica — nunca texto solto — para que a leitura seja a mesma em qualquer tela.

Uso em tela

A cor carrega o significado e é fixa: success (concluído/ok), warning (aguardando/atenção), error (bloqueado/cancelado), neutral (rascunho/neutro), info (informativo/em curso). Em tabela, prefira variant="subtle" ou soft (menos peso). Reforce além da cor — o rótulo textual é o que garante acessibilidade. Mantenha o rótulo curto (1–2 palavras) — ex.: "Pendente", "Em análise"; o detalhe vai na descrição/tooltip, não no rótulo. A taxonomia completa por entidade vive em Estrutura de Index.

Onde se aplica

No código

UBadge — doc técnica em ui.nuxt.com/docs/components/badge.

Acessibilidade

  • A cor nunca sozinha: o badge sempre traz rótulo textual (e, quando útil, ícone) — daltônicos e leitores de tela dependem do texto.
  • Garanta contraste AA do texto sobre o fundo da variante (ver Foundations › Acessibilidade).
  • Badge puramente informativo é estático; se for interativo (filtro/remover), precisa de nome acessível e foco.