Badge

Identifica estado, categoria ou atributo com um label curto e semanticamente explícito.

Preview funcional

Executado com HTML e CSS estáveis do DS, sem runtime JavaScript do componente.

Carregando preview funcional…

Anatomia

Active 1 2

1 Container (.ds-badge) — span em formato pill com cor de fundo e border-radius.
2 Texto — conteúdo do label, 1-2 palavras.

Variantes Solid

Brand Success Warning Error Info Neutral

Variantes Subtle

Brand Success Warning Error Info Neutral

Mapeamento de tokens

Tokens mostrados para a variante brand. Outras variantes de cor seguem o mesmo padrão com seus respectivos grupos de cor.

Propriedade	Token	Variável CSS
bg (brand solid)	`semantic.brand.background.default`	`--ds-brand-background-default`
text (brand solid)	`semantic.brand.content-default`	`--ds-brand-content-default`
bg (brand subtle)	`semantic.toned.background.default`	`--ds-toned-background-default`
text (brand subtle)	`semantic.toned.content-default`	`--ds-toned-content-default`
padding-x	`component.badge.padding-x.default`	`--ds-badge-padding-x-default`
padding-y	`component.badge.padding-y.default`	`--ds-badge-padding-y-default`
gap	`component.badge.gap.default`	`--ds-badge-gap-default`
border-radius	`component.badge.radius.default`	`--ds-badge-radius-default`
border-width	`component.badge.border-width.default`	`--ds-badge-border-width-default`
label font-size	`component.badge.label.font-size.default`	`--ds-badge-label-font-size-default`
label line-height	`component.badge.label.line-height.default`	`--ds-badge-label-line-height-default`
label font-weight	`component.badge.label.font-weight.default`	`--ds-badge-label-font-weight-default`

Quando usar

Use badges quando

Rotular, categorizar ou mostrar status: contagens, tags, estados ativo/inativo, níveis de severidade.

Não use badges quando

O conteúdo precisa de descricao ou ação (use Alert), o elemento deve ser grande e interativo (use Button), ou voce precisa de um indicador de contagem flutuante (notification dot — futuro).

Boas práticas

Active Beta

Faça

Mantenha labels com 1-2 palavras. "New", "Beta", "Active".

This feature is currently in beta testing

Não faça

Usar frases em badges. Devem ser labels curtos, não descricoes.

Approved Rejected

Faça

Use cor semantica correspondente ao significado: success para positivo, error para negativo.

Approved Rejected

Não faça

Usar cor decorativamente ou em contradicao com o significado do label.

Diretrizes de conteúdo

Regra	Exemplo
1-2 palavras, sentence case	"New", "Beta", "Active"
Status: vocabulario consistente	"Active" / "Inactive" — não "On" / "Off"
Contagens: use numeros, não palavras	"3" — não "Three"

Relacionados

Status: Estável
Distribuição: Pacote npm

Instalação

npm install ds-tis

pnpm add ds-tis

yarn add ds-tis

bun add ds-tis

Importações

import 'ds-tis/css'

Markup

<span class="ds-badge ds-badge--success ds-badge--subtle">
  Aprovado
</span>

Contrato da implementação Web

Classes CSS

Classe	Descrição
`ds-badge`	Classe base do badge
`ds-badge--solid`	Estilo preenchido (solid)
`ds-badge--subtle`	Estilo sutil com fundo claro
`ds-badge--brand`	Variante de cor brand
`ds-badge--success`	Variante de cor success (verde)
`ds-badge--warning`	Variante de cor warning (amarelo)
`ds-badge--error`	Variante de cor error (vermelho)
`ds-badge--info`	Variante de cor info (azul)
`ds-badge--neutral`	Variante de cor neutral (cinza)

Interação por teclado

Não interativo

Badges são elementos de exibicao estaticos e não recebem foco de teclado ou interação.

Accessibility

Critério WCAG	Requisito	Status
1.4.1 Use of Color (A)	O texto transmite o significado, não apenas a cor	✓
1.4.3 Contrast (AA)	Todas as combinacoes de cores atendem ao ratio de contraste 4.5:1	✓

Nota de acessibilidade

Badges são indicadores visuais. Sempre garanta que o texto do badge transmita o significado — não dependa apenas da cor. Se um badge comunica status importante, certifique-se de que faz parte do conteúdo de texto acessível, não apenas um ícone ou indicador de cor.

Responsabilidade da saída

Preserve a semântica do elemento nativo, nomes acessíveis, comportamento de teclado e foco visível.

Evidência de validação

Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.

Abrir referência estável