Badge
Recipe React distribuída como source, com elemento span e as classes/tokens públicos do Badge TIS.
Design
Preview funcional
Executado pela recipe React distribuída via shadcn e baseada em Base UI.
Carregando preview funcional…
Abrir playground React · shadcn/Base UI
Anatomia
Active
1
2
1 Container (
2 Texto — conteúdo do label, 1-2 palavras.
.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 |
Uso
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
Composição React
import { Badge } from "@/components/ui/badge"
<Badge tone="success" variant="subtle">
Aprovado
</Badge>Implementação
- Status
- Beta
- Distribuição
- Source via shadcn
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/badgepnpm dlx shadcn@latest add @tis/badgeyarn dlx shadcn@latest add @tis/badgebunx --bun shadcn@latest add @tis/badgeContrato público
- Item do registry
@tis/badge- Provider
- Composição React
- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Acessibilidade
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
Mantenha o badge não interativo e garanta que seu texto curto transmita significado sem depender apenas da cor.
Evidência de validação
Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.