Badge
Componente standalone apresentacional com inputs tipados, content projection e as classes públicas do Badge TIS.
Design
Preview funcional
Executado pelo componente Angular nativo com Elemento host apresentacional.
Carregando preview funcional…
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
Quando escolher esta saída
Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.
Implementação
- Status
- Beta
- Distribuição
- Tarball Angular validado
Instalação
npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tispnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisyarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisbun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisEstilos do DS
@import "ds-tis/css";Importações Angular
import { TisBadge } from '@tis/angular/badge'Template
<tis-badge tone="success" variant="subtle">
Aprovado
</tis-badge>Contrato público
- Pacote
@tis/angular- Entrypoint
@tis/angular/badge- Primitive
Elemento host apresentacional- 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.