Docs›Componentes (Admin)›mad-callout
Componentes (Admin)

mad-callout

Bloco destacado com header, body e footer.

Bloco destacado com header (ícone + título), corpo opcional e footer de ações opcional. Para dicas, explicações persistentes e blocos de documentação/aviso com botões. Para uma mensagem curta e transitória de feedback, prefira <mad-alert>.

Props

Prop Tipo Default Descrição
type string 'info' info, success, warning, danger
title string '' Título no header
icon string auto Ícone Lucide. Automático pelo type quando omitido
calloutFooter string '' HTML do footer (botões de ação). Nunca usar actions — colide com o nome interno usado pelo MadRenderContext
class string '' Classes CSS extras
style string '' Estilos inline

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

<mad-callout> (assim como <mad-alert>) usa danger, não error — o CSS só define .mad-callout-danger.

Variantes

<mad-callout type="info" title="O que é Auto-Bind?">
    Auto-bind permite que mudanças no PHP reflitam direto no DOM sem full re-render.
</mad-callout>

<mad-callout type="success" title="Tudo certo">
    Todas as integrações estão funcionando normalmente.
</mad-callout>

<mad-callout type="warning" title="Cuidado">
    Esta ação não pode ser desfeita.
</mad-callout>

<mad-callout type="danger" title="Operação crítica">
    Você está prestes a excluir registros do sistema.
</mad-callout>

Só título (sem corpo)

<mad-callout type="info" title="Modo leitura ativo" />

O footer recebe HTML pré-computado via prop calloutFooter/callout-footer — não é um slot nomeado (o pipeline Blade do MAD não compila <x-slot>; veja <mad-card> para o porquê). Monte o HTML num @php e passe via bind:

@php
    $footer = '<mad-btn variant="primary" size="sm" mad:click="onAceitar">Aceitar</mad-btn>'
            . '<mad-btn variant="ghost" size="sm" mad:click="onRecusar">Recusar</mad-btn>';
@endphp
<mad-callout type="warning" title="Termos atualizados" :callout-footer="$footer">
    Os termos de uso foram atualizados em 01/04/2026. Confirme para continuar.
</mad-callout>

Com ícone customizado

<mad-callout type="info" icon="lightbulb" title="Dica">
    Você pode arrastar e soltar arquivos direto na área de upload.
</mad-callout>

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

Cenário Usar
Dica/explicação num drawer/form <mad-callout>
Bloco com botões de ação (aceitar/recusar) <mad-callout>
Documentação com destaque visual <mad-callout>
Validação inline em form, feedback rápido <mad-alert>
Feedback transitório que some sozinho MadToast (não mad-alert/mad-callout)

NUNCA fazer

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

{{-- CERTO --}}
<mad-callout type="danger" title="Falha">...</mad-callout>

{{-- ERRADO: prop "actions" (colide com nome interno do MadRenderContext) --}}
<mad-callout type="info" :actions="$footer">...</mad-callout>

{{-- CERTO: callout-footer --}}
<mad-callout type="info" :callout-footer="$footer">...</mad-callout>

{{-- ERRADO: montar callout manualmente com div --}}
<div class="callout callout-info">
    <i class="icon-info"></i> Título
    <p>Corpo</p>
</div>

{{-- CERTO --}}
<mad-callout type="info" title="Título">Corpo</mad-callout>

{{-- ERRADO: usar callout pra feedback transitório (toast existe pra isso) --}}
<mad-callout type="success" title="Salvo">Pedido gravado.</mad-callout>

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