Alerts
Alertas para comunicar mensagens de feedback ao usuario. 4 variantes semanticas, suporte a icones e dismissivel.
Variantes
Preview
Operacao realizada com sucesso.
Ocorreu um erro ao processar sua solicitacao.
Atencao: esta acao nao pode ser desfeita.
Voce tem 3 notificacoes pendentes.
HTML
<div class="canta-alert canta-alert--success">Operacao realizada com sucesso.</div>
<div class="canta-alert canta-alert--error">Ocorreu um erro ao processar sua solicitacao.</div>
<div class="canta-alert canta-alert--warning">Atencao: esta acao nao pode ser desfeita.</div>
<div class="canta-alert canta-alert--info">Voce tem 3 notificacoes pendentes.</div>Dismissivel
Com botao de fechar
Este alerta pode ser fechado pelo usuario.
Aviso importante que pode ser dispensado.
HTML
<div class="canta-alert canta-alert--info canta-alert--dismissible">
Este alerta pode ser fechado pelo usuario.
<button class="canta-alert__close" aria-label="Fechar">
<span class="material-symbols-rounded">close</span>
</button>
</div>Com Icones
Icone + Mensagem
check_circle
Dados salvos com sucesso!
error
Falha ao conectar com o servidor.
warning
Sua sessao expira em 5 minutos.
info
Nova versao disponivel para atualizacao.
HTML
<div class="canta-alert canta-alert--success">
<span class="canta-alert__icon material-symbols-rounded">check_circle</span>
Dados salvos com sucesso!
</div>
<div class="canta-alert canta-alert--error">
<span class="canta-alert__icon material-symbols-rounded">error</span>
Falha ao conectar com o servidor.
</div>Exemplo Completo
Icone + Dismissivel
check_circle
Arquivo enviado com sucesso!
HTML
<div class="canta-alert canta-alert--success canta-alert--dismissible">
<span class="canta-alert__icon material-symbols-rounded">check_circle</span>
Arquivo enviado com sucesso!
<button class="canta-alert__close" aria-label="Fechar">
<span class="material-symbols-rounded">close</span>
</button>
</div>API
| Classe | Descricao |
|---|---|
.canta-alert | Classe base do alerta (obrigatoria) |
.canta-alert--success | Alerta de sucesso (verde) |
.canta-alert--error | Alerta de erro (vermelho) |
.canta-alert--warning | Alerta de aviso (amarelo) |
.canta-alert--info | Alerta informativo (azul) |
.canta-alert--dismissible | Alerta com botao de fechar |
.canta-alert__icon | Icone do alerta |
.canta-alert__close | Botao de fechar (dentro de --dismissible) |