Badge [sw-badge]
Pequenos indicadores de status, contadores e etiquetas. Perfeitos para notificações e metadados rápidos.
Hot
Cores Semânticas
Padrão
Primary
Secondary
Success
Alert
Error
Info
Dark
Outline Style
Primary
Success
Error
Info
Status Dots
Online
Away
Busy
Large
Badges Flutuantes
Use .bdg-wrap no elemento pai para
posicionar o badge no canto superior direito.
9+
5
12
Tamanhos
PP
P
M (padrão)
G
GG
XG
Quick Reference
| Atributo/Classe | Tipo | Descrição |
|---|---|---|
[sw-badge] |
Base | Atributo fundamental para o badge (fundo neutro por padrão). |
.sw-badge-pri, .sw-badge-sec, .sw-badge-suc, .sw-badge-ale, .sw-badge-err, .sw-badge-inf, .sw-badge-drk
|
Cor | Variantes semânticas de cor de fundo. |
.sw-badge-out |
Estilo | Outline: fundo transparente com borda colorida. Combina com variantes de cor. |
.sw-badge-dot |
Forma | Transforma em ponto circular para indicadores de status. |
.sw-badge-pp, .sw-badge-p, .sw-badge-m, .sw-badge-g, .sw-badge-gg, .sw-badge-xg
|
Tamanho | Escala de tamanhos PP ? XG. Padrão sem classe equivale a M. |
.bdg-wrap |
Layout | Container com position: relative para badges flutuantes. |
.bdg-fl |
Posição | Flutua o badge no canto superior direito do elemento pai (.bdg-wrap).
|