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

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o alerta
id	string	Identificador ú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)

Métodos via Ref

O componente Alert expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Alert } from 'eitri-luminus';

function MyComponent() {
  const alertRef = useRef<Alert>(null);

  const handleShow = () => {
    alertRef.current?.show();
  };

  const handleHide = () => {
    alertRef.current?.hide();
  };

  const handleDismiss = () => {
    alertRef.current?.dismiss();
  };

  return (
    <>
      <Alert ref={alertRef} className="alert-info">
        Esta é uma mensagem de alerta
      </Alert>
      <button onClick={handleShow}>Mostrar</button>
      <button onClick={handleHide}>Ocultar</button>
      <button onClick={handleDismiss}>Descartar</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
show()	void	Exibe o alerta
hide()	void	Oculta o alerta
isVisible()	boolean	Retorna se o alerta está visível
dismiss()	void	Descarta o alerta (oculta e chama onDismiss)

Eventos Disponíveis

Evento	Tipo	Descrição
onShow	() => void	Disparado quando o alerta é exibido
onHide	() => void	Disparado quando o alerta é ocultado
onDismiss	() => void	Disparado quando o alerta é descartado
onClose	() => void	Disparado quando o alerta é fechado

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
• Métodos via ref disponíveis para controle programático do alerta