mad-alert — Componentes (Admin)

Mensagem contextual curta, inline e transitória — role="alert" para acessibilidade. Use para avisos rápidos dentro de forms, validações e feedback contextual.

<mad-alert> é o irmão mais simples de <mad-callout>: mesma paleta visual, mas sem header/footer estruturado. Veja a tabela de decisão abaixo.

Props

Prop	Tipo	Default	Descrição
type	string	`'info'`	`info`, `success`, `warning`, `danger`
title	string	`''`	Título em negrito acima do corpo
icon	string	auto	Ícone Lucide. Automático pelo `type` quando omitido
class	string	`''`	Classes CSS extras
style	string	`''`	Estilos inline

Ícones automáticos por type: info → info, success → check-circle, warning → alert-triangle, danger → x-circle.

O mapa de ícones aceita danger e error como sinônimos — mas o CSS só define .mad-alert-danger. Com type="error" o ícone sai certo e a caixa sai sem cor (só o .mad-alert base). Use sempre danger.

Variantes

<mad-alert type="info" title="Atenção">
    Confira os dados antes de salvar.
</mad-alert>

<mad-alert type="success" title="Salvo">
    Pedido gravado com sucesso.
</mad-alert>

<mad-alert type="warning" title="Estoque baixo">
    Restam apenas 3 unidades em estoque.
</mad-alert>

<mad-alert type="danger" title="Erro">
    Não foi possível processar o pagamento.
</mad-alert>

Sem título (só corpo)

<mad-alert type="info">
    Os campos marcados com * são obrigatórios.
</mad-alert>

Com ícone customizado

<mad-alert type="info" icon="lightbulb" title="Dica">
    Use o atalho Ctrl+S para salvar mais rápido.
</mad-alert>

Quando usar `<mad-alert>` vs. outras opções

Cenário	Usar
Validação inline em form	`<mad-alert>`
Feedback rápido pós-ação (sem ser toast)	`<mad-alert>`
Aviso persistente no topo de uma página	`<mad-alert>` ou `<mad-callout>`
Dica/explicação com header + botões de ação	`<mad-callout>`
Feedback transitório que some sozinho	`MadToast` (não `mad-alert`)

NUNCA fazer

{{-- ERRADO: usar "error" — CSS não define .mad-alert-error --}}
<mad-alert type="error" title="Erro">...</mad-alert>

{{-- CERTO --}}
<mad-alert type="danger" title="Erro">...</mad-alert>

{{-- ERRADO: montar alert manualmente com div --}}
<div class="alert alert-info">
    <i class="icon-info"></i> Mensagem
</div>

{{-- CERTO --}}
<mad-alert type="info">Mensagem</mad-alert>

{{-- ERRADO: usar alert pra feedback transitório (toast existe pra isso) --}}
<mad-alert type="success">Salvo!</mad-alert>

{{-- CERTO: toast some sozinho --}}
return MadToast::success('Salvo!');

{{-- ERRADO: alert com botões de ação (alert não tem footer estruturado) --}}
<mad-alert type="warning">
    Confirmar?
    <mad-btn>Sim</mad-btn>
</mad-alert>

{{-- CERTO: callout tem footer dedicado --}}
@php $f = '<mad-btn>Sim</mad-btn>'; @endphp
<mad-callout type="warning" title="Confirmar?" :callout-footer="$f" />

Props#

Variantes#

Sem título (só corpo)#

Com ícone customizado#

Quando usar <mad-alert> vs. outras opções#