Badges
Etiquetas compactas para status, contadores e categorias. 6 variantes de cor, 3 tamanhos e indicador de ponto.
Variantes de Cor
Preview
Primary
Success
Error
Warning
Info
Magenta
HTML
<span class="canta-badge canta-badge--primary">Primary</span>
<span class="canta-badge canta-badge--success">Success</span>
<span class="canta-badge canta-badge--error">Error</span>
<span class="canta-badge canta-badge--warning">Warning</span>
<span class="canta-badge canta-badge--info">Info</span>
<span class="canta-badge canta-badge--magenta">Magenta</span>Tamanhos
Small / Default / Large
Small
Default
Large
HTML
<span class="canta-badge canta-badge--primary canta-badge--sm">Small</span>
<span class="canta-badge canta-badge--primary">Default</span>
<span class="canta-badge canta-badge--primary canta-badge--lg">Large</span>Com Indicador de Ponto
Dot + Texto
Online
Offline
Ausente
Em reuniao
HTML
<span class="canta-badge canta-badge--success">
<span class="canta-badge__dot"></span> Online
</span>
<span class="canta-badge canta-badge--error">
<span class="canta-badge__dot"></span> Offline
</span>Exemplos de Uso
Badges em contexto
Notificacoes
5
Status do deploy:
Ativo
Versao:
v2.1.0
API
| Classe | Descricao |
|---|---|
.canta-badge | Classe base do badge (obrigatoria) |
.canta-badge--primary | Badge primario (azul CANTA) |
.canta-badge--success | Badge de sucesso (verde) |
.canta-badge--error | Badge de erro (vermelho) |
.canta-badge--warning | Badge de aviso (amarelo) |
.canta-badge--info | Badge informativo (azul claro) |
.canta-badge--magenta | Badge magenta CANTA |
.canta-badge--sm | Tamanho pequeno |
.canta-badge--lg | Tamanho grande |
.canta-badge__dot | Indicador circular de ponto |