Skip to main content

Toast

Apresentação​

O componente Toast é responsável por exibir notificações temporárias na interface do usuário. Ele é ideal para fornecer feedback sobre ações realizadas, alertas importantes ou mensagens que precisam ser exibidas por um curto período de tempo.

Quando usar​

  • Para confirmar ações realizadas
  • Para exibir mensagens de erro
  • Para mostrar notificações de sucesso
  • Para alertar sobre eventos importantes
  • Para informar sobre atualizações
  • Para exibir mensagens temporárias
  • Para notificar sobre mudanças de estado
  • Para comunicar informações críticas

Forma básica de uso​

import { Toast } from 'eitri-luminus';

// Toast básico
<Toast>
  <Toast.Alert>
    Mensagem de notificação
  </Toast.Alert>
</Toast>

// Toast com classes personalizadas
<Toast className="toast-top toast-end">
  <Toast.Alert className="alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Informação importante</span>
  </Toast.Alert>
</Toast>

// Toast com diferentes variantes
<Toast>
  <Toast.Alert className="alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Operação concluída com sucesso!</span>
  </Toast.Alert>
</Toast>

<Toast>
  <Toast.Alert className="alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Ocorreu um erro!</span>
  </Toast.Alert>
</Toast>

// Toast com posicionamento personalizado
<Toast className="toast-bottom toast-center">
  <Toast.Alert className="alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Aviso importante!</span>
  </Toast.Alert>
</Toast>

Propriedades​

Toast​

PropriedadeTipoDescrição
classNamestringClasses CSS adicionais
idstringIdentificador único do componente

Toast.Alert​

PropriedadeTipoDescrição
classNamestringClasses CSS adicionais
idstringIdentificador único do componente

Heranças​

Os componentes Toast e Toast.Alert herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

  • Propriedades de estilo (margin, padding, etc)
  • Propriedades de layout (flex, grid, etc)
  • Propriedades de posicionamento
  • Propriedades de acessibilidade
  • Propriedades de identificação (id, data-e)

Observações​

  • O Toast usa a classe 'toast' para estilização base
  • O Toast.Alert usa a classe 'alert' para estilização base
  • É possível personalizar a aparência usando classes do Tailwind
  • Os componentes são responsivos por padrão
  • Suportam diferentes variantes de estilo (info, success, warning, error)
  • Podem ser posicionados em diferentes locais da tela
  • São ideais para feedback visual temporário
  • Mantêm a semântica HTML apropriada
  • Podem conter ícones e botões
  • Suportam conteúdo rico e personalizado
  • São especialmente úteis para notificações não intrusivas
  • Podem ser combinados com outros componentes