Badge [y2badge]
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+
Tamanhos
PP
P
M (padrão)
G
GG
XG
Quick Reference
| Atributo/Classe | Tipo | Descrição |
|---|---|---|
[y2badge] |
Base | Atributo fundamental para o badge (fundo neutro por padrão). |
.y2badge-pri, .y2badge-sec, .y2badge-suc, .y2badge-ale, .y2badge-err, .y2badge-inf, .y2badge-drk
|
Cor | Variantes semânticas de cor de fundo. |
.y2badge-out |
Estilo | Outline: fundo transparente com borda colorida. Combina com variantes de cor. |
.y2badge-dot |
Forma | Transforma em ponto circular para indicadores de status. |
.y2badge-pp, .y2badge-p, .y2badge-m, .y2badge-g, .y2badge-gg, .y2badge-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).
|