Badge
Componente de marcação visual para categorização e status. Disponível em 5 variantes semânticas, 2 tamanhos e com suporte a ícone. Dark mode automático via variáveis semânticas.
Uso
Quando e como utilizar cada variante da badge de acordo com o contexto.
- Success — Status positivo ou concluído.
- Warning — Status que requer atenção.
- Error — Status negativo ou com falha.
- Neutral — Informação genérica sem semântica específica.
- Outline — Categorização leve, sem destaque visual.
Exemplos
Veja abaixo os exemplos interativos de cada variante da badge, com todos os seus estados.
Carregando exemplo...
Carregando exemplo...
Carregando exemplo...
Carregando exemplo...
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .badge | Wrapper pill com padding, border-radius e cor de fundo |
| Ícone | .badge-icon | Ícone SVG opcional, antes ou depois do texto |
| Label | texto direto | Texto da badge, Inter 14px w500 |
Propriedades
Classes e modificadores disponíveis para configurar a badge.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.badge | classe | — | Container principal da badge. |
.badge--success | classe | — | Variante de sucesso (verde). |
.badge--warning | classe | — | Variante de aviso (amarelo). |
.badge--error | classe | — | Variante de erro (vermelho). |
.badge--neutral | classe | — | Variante neutra (cinza). |
.badge--outline | classe | — | Variante contornada, sem preenchimento. |
.badge--sm | classe | — | Tamanho pequeno (30px ao invés de 36px). |
.badge-icon | classe | — | Container do ícone dentro da badge. |
.badge-close | classe | — | Botão de fechar/remover (12x12). |
Código
Snippets prontos para copiar e usar no seu projeto.
Badge simples
html
<span class="badge badge--success">Ativo</span>
<span class="badge badge--warning">Pendente</span>
<span class="badge badge--error">Inativo</span>
<span class="badge badge--neutral">Rascunho</span>
<span class="badge badge--outline">Categoria</span>Badge com ícone
html
<span class="badge badge--success">
<span class="badge-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 48 48" fill="none" stroke="currentColor"
stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"/>
<path d="M16 24L22 30L34 18"/>
</svg>
</span>
Aprovado
</span>Badge removível
html
<span class="badge badge--neutral">
<span class="badge-text">Categoria</span>
<button class="badge-close">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round">
<path d="M3 3l6 6M9 3l-6 6"/>
</svg>
</button>
</span>Design
Especificações visuais e tokens utilizados no componente.
Especificações
| Propriedade | Large | Small |
|---|---|---|
| Altura | 36px | 30px |
| Padding | 0 16px | 0 12px |
| Border-radius | 9999px (pill) | 9999px (pill) |
| Fonte | Inter 14px w500 | Inter 12px w500 |
| Ícone | 16x16 | 12x12 |
Tokens utilizados
| Variante | Background | Texto |
|---|---|---|
| Success | --surface-base-alert-container-success | --text-base-success-default |
| Warning | --surface-base-alert-container-warning | --text-base-warning-default |
| Error | --surface-base-alert-container-error | --text-base-error-default |
| Neutral | --surface-base-neutral-container-emphasis | --text-base-neutral-default |
| Outline | transparent | --text-base-neutral-default |