Toasts | DS CANTA.

Variantes

check_circle

Sucesso Registro salvo com sucesso.

error

Erro Falha ao processar a requisicao.

warning

Aviso Sua sessao expira em 5 minutos.

info

Informacao Nova atualizacao disponivel.

<div class="canta-toast canta-toast--success">
  <span class="canta-toast__icon material-symbols-rounded">check_circle</span>
  <div class="canta-toast__content">
    <strong class="canta-toast__title">Sucesso</strong>
    <span class="canta-toast__message">Registro salvo com sucesso.</span>
  </div>
  <button class="canta-toast__close">
    <span class="material-symbols-rounded">close</span>
  </button>
</div>

<div class="canta-toast canta-toast--error">...</div>
<div class="canta-toast canta-toast--warning">...</div>
<div class="canta-toast canta-toast--info">...</div>

Posicionamento e Empilhamento

Use um container .canta-toast-container com modificadores de posicao. Os toasts empilham automaticamente dentro do container.

check_circle

Toast 1

info

Toast 2

<!-- Container no canto superior direito -->
<div class="canta-toast-container canta-toast-container--top-right">
  <div class="canta-toast canta-toast--success">...</div>
  <div class="canta-toast canta-toast--info">...</div>
</div>

<!-- Posicoes disponiveis -->
<div class="canta-toast-container canta-toast-container--top-left">...</div>
<div class="canta-toast-container canta-toast-container--top-right">...</div>
<div class="canta-toast-container canta-toast-container--bottom-left">...</div>
<div class="canta-toast-container canta-toast-container--bottom-right">...</div>

Toast Simples

check_circle

Arquivo enviado com sucesso!

<div class="canta-toast canta-toast--success">
  <span class="canta-toast__icon material-symbols-rounded">check_circle</span>
  <div class="canta-toast__content">
    <span class="canta-toast__message">Arquivo enviado com sucesso!</span>
  </div>
  <button class="canta-toast__close">
    <span class="material-symbols-rounded">close</span>
  </button>
</div>

API

Classe	Descricao
`.canta-toast`	Classe base do toast (obrigatoria)
`.canta-toast--success`	Toast de sucesso (verde)
`.canta-toast--error`	Toast de erro (vermelho)
`.canta-toast--warning`	Toast de aviso (amarelo)
`.canta-toast--info`	Toast informativo (azul)
`.canta-toast__icon`	Icone do toast
`.canta-toast__content`	Container de titulo e mensagem
`.canta-toast__title`	Titulo do toast (opcional)
`.canta-toast__message`	Mensagem do toast
`.canta-toast__close`	Botao de fechar
`.canta-toast-container`	Container de posicionamento
`.canta-toast-container--top-left`	Posicao superior esquerda
`.canta-toast-container--top-right`	Posicao superior direita
`.canta-toast-container--bottom-left`	Posicao inferior esquerda
`.canta-toast-container--bottom-right`	Posicao inferior direita