Skip to main content

Alert

Apresentação​

O componente Alert é responsável por exibir mensagens de alerta, notificações e feedback para o usuário. Ele é ideal para comunicar informações importantes, avisos, erros ou sucessos de forma clara e visualmente destacada.

Quando usar​

  • Para exibir mensagens de erro
  • Para mostrar avisos importantes
  • Para comunicar sucesso em operações
  • Para exibir informações críticas
  • Para notificar sobre mudanças
  • Para alertar sobre problemas

Forma básica de uso​

import { Alert } from 'eitri-luminus';

// Alerta básico
<Alert>
  Esta é uma mensagem de alerta
</Alert>

// Alerta com classes personalizadas
<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>
</Alert>

// Alerta com conteúdo rico
<Alert className="alert-success">
  <div className="flex items-center">
    <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>
    <div className="ml-3">
      <h3 className="font-bold">Operação concluída!</h3>
      <div className="text-sm">Os dados foram salvos com sucesso.</div>
    </div>
  </div>
</Alert>

// Alerta com botão de fechar
<Alert className="alert-warning">
  <span>Aviso importante</span>
  <div>
    <button className="btn btn-sm btn-ghost">Fechar</button>
  </div>
</Alert>

Propriedades​

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

Heranças​

O componente Alert herda 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 componente usa a classe 'alert' para estilização base
  • Inclui o atributo role="alert" para acessibilidade
  • É possível personalizar a aparência usando classes do Tailwind
  • O componente é responsivo por padrão
  • Suporta diferentes variantes de estilo (info, success, warning, error)
  • Pode conter ícones e botões
  • Ideal para feedback visual imediato
  • Mantém a semântica HTML apropriada
  • Suporta conteúdo rico e personalizado
  • Pode ser combinado com outros componentes para criar interfaces mais complexas