Componentes — 02

Badge

Rótulos compactos para status, categorias e forças militares. Monospace em caixa alta com tracking largo — linguagem de field manual.

02.1

Variantes Base

Default · Brand · Outline · Dark

PadrãoAprovadoPendenteBeta

<Badge variant="default">Novo</Badge>
<Badge variant="brand">Aprovado</Badge>
<Badge variant="outline">Inativo</Badge>
<Badge variant="dark">Beta</Badge>

Com ponto de status

AtivoOfflineProcessando

<Badge variant="brand" dot>Online</Badge>

Tamanhos — SM · MD

SM — CompactoMD — Padrão

<Badge size="sm">Pequeno</Badge>
<Badge size="md">Médio</Badge>

02.2

Urgência

Use --fire / --urgent para escassez, prazo e CTAs críticos. Reserve para a informação mais importante da tela — não dilua.

Variante urgent — base, com dot, tamanhos

Último lote3 vagas restantesEncerra hoje

<Badge variant="urgent">Último lote</Badge>
<Badge variant="urgent" dot>3 vagas restantes</Badge>

Verde × Laranja — hierarquia de urgência

Inscrições abertasação normal

Último loteurgência máxima

Encerradoneutro / inativo

02.3

Variantes de Forças

Uma variante por força militar. Use para categorizar conteúdo por corporação.

Exército · Marinha · FAB · PM · Bombeiros

EX — ExércitoMB — MarinhaFAB — AéreaPM — PolíciaBM — Bombeiros

<Badge variant="ex">Exército</Badge>
<Badge variant="mb">Marinha</Badge>
<Badge variant="fab">FAB</Badge>
<Badge variant="pm">PM</Badge>
<Badge variant="bm">Bombeiros</Badge>

Com dot de status

EX — ExércitoMB — MarinhaFABPMBM

02.3

Uso em Contexto

Como badges aparecem dentro de cards e listas.

Card com badge de força

EsPCEx 2025Exército

Escola Preparatória de Cadetes do Exército. 40 vagas.

Inscrições abertasGratuito