Badge
Badges são pequenos indicadores de status usados para rotular, categorizar ou destacar informações. Disponíveis em estilos solid e subtle com 7 variantes de cor.Badges are small status indicators used to label, categorize, or highlight information. Available in solid and subtle styles across 7 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
Primary
Secondary
Success
Warning
Error
Info
Neutral
<span class="ds-badge ds-badge--primary ds-badge--solid">Primary</span>
<span class="ds-badge ds-badge--secondary ds-badge--solid">Secondary</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
Primary
Secondary
Success
Warning
Error
Info
Neutral
<span class="ds-badge ds-badge--primary ds-badge--subtle">Primary</span>
<span class="ds-badge ds-badge--secondary ds-badge--subtle">Secondary</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 primary. Outras variantes de cor seguem o mesmo padrão com seus respectivos grupos de cor.Tokens shown for the primary variant. Other color variants follow the same pattern with their respective color groups.
| PropriedadeProperty | Token (semantic) | Variavel CSSCSS variable |
|---|---|---|
| bg (primary solid) | semantic.primary.background.default | --ds-primary-background-default |
| text (primary solid) | semantic.primary.content-default | --ds-primary-content-default |
| bg (primary subtle) | semantic.toned.bg-default | --ds-toned-background-default |
| text (primary subtle) | semantic.toned.content-default | --ds-toned-content-default |
| border-radius | foundation.radius.9999 | --ds-radius-9999 |
Classes CSSCSS classes
| ClasseClass | DescricaoDescription |
|---|---|
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--primary | Variante de cor primaryPrimary color variant |
ds-badge--secondary | Variante de cor secondarySecondary 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
| Criterio 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.