Badge
Badges são pequenos indicadores de status usados para rotular, categorizar ou destacar informações. A API combina estilos solid e subtle com variantes semânticas de cor.Badges are small status indicators used to label, categorize, or highlight information. The API combines solid and subtle styles with semantic color variants.
Quando usarWhen to use
Use badges quandoUse badges when
Rotular, categorizar ou mostrar status: contagens, tags, estados ativo/inativo, níveis de severidade.Labeling, categorizing, or showing status: counts, tags, active/inactive states, severity levels.
Não use badges quandoDon't use badges when
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).The content needs a description or action (use Alert), the element should be large and interactive (use Button), or you need a floating count indicator (notification dot — future).
AnatomiaAnatomy
Active
1
2
1 Container (
2 Texto — conteúdo do label, 1-2 palavras.1 Container (
2 Text — label content, 1-2 words.
.ds-badge) — span em formato pill com cor de fundo e border-radius.2 Texto — conteúdo do label, 1-2 palavras.1 Container (
.ds-badge) — pill-shaped span with background color and border-radius.2 Text — label content, 1-2 words.
Variantes SolidSolid Variants
Brand
Success
Warning
Error
Info
Neutral
<span class="ds-badge ds-badge--brand ds-badge--solid">Brand</span>
<span class="ds-badge ds-badge--success ds-badge--solid">Success</span>
<span class="ds-badge ds-badge--warning ds-badge--solid">Warning</span>
<span class="ds-badge ds-badge--error ds-badge--solid">Error</span>
<span class="ds-badge ds-badge--info ds-badge--solid">Info</span>
<span class="ds-badge ds-badge--neutral ds-badge--solid">Neutral</span>Variantes SubtleSubtle Variants
Brand
Success
Warning
Error
Info
Neutral
<span class="ds-badge ds-badge--brand ds-badge--subtle">Brand</span>
<span class="ds-badge ds-badge--success ds-badge--subtle">Success</span>
<span class="ds-badge ds-badge--warning ds-badge--subtle">Warning</span>
<span class="ds-badge ds-badge--error ds-badge--subtle">Error</span>
<span class="ds-badge ds-badge--info ds-badge--subtle">Info</span>
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Neutral</span>Boas práticasBest practices
Active
Beta
Faça
Mantenha labels com 1-2 palavras. "New", "Beta", "Active".Keep labels to 1-2 words. "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.Use sentences in badges. They should be short labels, not descriptions.
Approved
Rejected
Faça
Use cor semantica correspondente ao significado: success para positivo, error para negativo.Use semantic color matching meaning: success for positive, error for negative.
Approved
Rejected
Não faça
Usar cor decorativamente ou em contradicao com o significado do label.Use color decoratively or in contradiction with the label meaning.
Diretrizes de conteúdoContent guidelines
| RegraRule | ExemploExample |
|---|---|
| 1-2 palavras, sentence case1-2 words, sentence case | "New", "Beta", "Active" |
| Status: vocabulario consistenteStatus: consistent vocabulary | "Active" / "Inactive" — não "On" / "Off""Active" / "Inactive" — not "On" / "Off" |
| Contagens: use numeros, não palavrasCounts: use numbers, not words | "3" — não "Three""3" — not "Three" |
Mapeamento de tokensToken mapping
Tokens mostrados para a variante brand. Outras variantes de cor seguem o mesmo padrão com seus respectivos grupos de cor.Tokens shown for the brand variant. Other color variants follow the same pattern with their respective color groups.
| PropriedadeProperty | Token | Variável CSSCSS variable |
|---|---|---|
| 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 |
Classes CSSCSS classes
| ClasseClass | DescriçãoDescription |
|---|---|
ds-badge | Classe base do badgeBase badge class |
ds-badge--solid | Estilo preenchido (solid)Solid filled style |
ds-badge--subtle | Estilo sutil com fundo claroSubtle light background style |
ds-badge--brand | Variante de cor brandBrand color variant |
ds-badge--success | Variante de cor success (verde)Success/green color variant |
ds-badge--warning | Variante de cor warning (amarelo)Warning/yellow color variant |
ds-badge--error | Variante de cor error (vermelho)Error/red color variant |
ds-badge--info | Variante de cor info (azul)Info/blue color variant |
ds-badge--neutral | Variante de cor neutral (cinza)Neutral/gray color variant |
Interação por tecladoKeyboard interaction
Não interativoNot interactive
Badges são elementos de exibicao estaticos e não recebem foco de teclado ou interação.Badges are static display elements and do not receive keyboard focus or interaction.
AccessibilityAccessibility
| Critério WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 1.4.1 Use of Color (A) | O texto transmite o significado, não apenas a corText conveys meaning, not color alone | ✓ |
| 1.4.3 Contrast (AA) | Todas as combinacoes de cores atendem ao ratio de contraste 4.5:1All color combinations meet 4.5:1 contrast ratio | ✓ |
Nota de acessibilidadeAccessibility note
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.Badges are visual indicators. Always ensure the badge text itself conveys the meaning — do not rely on color alone. If a badge communicates important status, make sure it is part of the accessible text content, not just an icon or color indicator.