mad-btn

Props#

Prop	Tipo	Default	Descricao
name	string	''	Identificador do botao — habilita form->hide('name')/form->disable('name') no servidor (ver secao abaixo)
variant	string	'secondary'	primary, secondary, outline, ghost, danger, success, warning
size	string	''	sm, '' (normal), lg
icon	string	''	Icone Lucide (esquerda)
iconEnd	string	''	Icone Lucide (direita)
href	string	''	Se informado, renderiza como <a>
type	string	'button'	button, submit, reset
disabled	bool	false
loading	bool	false	Spinner no lugar do icone
block	bool	false	Largura 100%
confirm	string	''	Pergunta de confirmacao antes de executar a acao (ver secao abaixo)
label	string	''	Rotulo alternativo ao slot
color	string	''	Cor custom (fora da paleta de variant)
class	string	''	Classes CSS extras
attrs	string	''	Atributos HTML extras

Alem das props acima, <mad-btn> (como qualquer tag MAD) aceita os atalhos de overlay/navegacao processados pelo compilador Blade — nao sao @props do componente, mas atributos especiais resolvidos em tempo de compilacao: navigate/target, method, params/:params, open-drawer, close-drawer, open-modal, close-modal. Veja as secoes abaixo.

Navegacao — SEMPRE usar navigate para ir a outra pagina#

O atributo navigate faz navegacao client-side via Mad.go(), sem request ao servidor. Detecta automaticamente se o destino e pagina (INTERNAL) ou overlay (DRAWER/MODAL).

{{-- Navegar para outra pagina --}}
<mad-btn navigate="PedidoVendaListagem" icon="list">Pedidos</mad-btn>

{{-- Abrir drawer/modal (detecta automaticamente pelo wrapper da classe destino) --}}
<mad-btn navigate="DocProdutoForm" variant="primary" icon="plus">Novo Produto</mad-btn>

{{-- Com metodo especifico --}}
<mad-btn navigate="DocProdutoForm" method="onEdit" icon="pencil">Editar</mad-btn>

{{-- Com parametros --}}
<mad-btn navigate="DocProdutoForm" method="onEdit" params="{id: 42}" icon="pencil">Editar</mad-btn>

target e aceito como alias de navigate.

Abrir/fechar drawer ou modal por nome#

<mad-btn open-drawer="filtro-avancado" icon="sliders-horizontal">Filtro</mad-btn>
<mad-btn close-drawer="filtro-avancado">Fechar</mad-btn>
<mad-btn open-modal="confirmar" variant="danger">Excluir</mad-btn>
<mad-btn close-modal="confirmar">Cancelar</mad-btn>

Chamar metodo PHP (mad:click)#

Usar para executar acoes no servidor: salvar dados, consultar, aprovar, cancelar, etc.

{{-- Acoes que executam logica no servidor --}}
<mad-btn mad:click="onSave" variant="primary" icon="save">Salvar</mad-btn>
<mad-btn mad:click="onAprovar" variant="success" icon="check">Aprovar</mad-btn>
<mad-btn mad:click="onExportar" icon="download">Exportar CSV</mad-btn>
<mad-btn mad:click="onLimpar" variant="ghost" icon="x-circle">Limpar Filtros</mad-btn>

mad:click para navegacao — somente quando precisa do servidor antes#

Quando precisa validar, buscar parametro ou executar logica antes de navegar:

<mad-btn mad:click="onNovoPedido" variant="primary" icon="plus">Novo Pedido</mad-btn>

public function onNovoPedido(): MadResponse
{
    if (!$this->podeCriarPedido()) {
        return MadMessage::error('Erro', 'Sem permissao para criar pedidos.');
    }

    $proximoNumero = PedidoVenda::proximoNumero();

    return (new MadResponse())
        ->script("Mad.go('PedidoVendaForm','show',{numero: {$proximoNumero}})");
}

Submit de formulario#

<mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>

Dentro de <mad-form submit="onSave"> ou <form mad:submit="onReload">.

NUNCA usar mad:click APENAS para navegar#

{{-- ERRADO: mad:click so para navegar — gera request AJAX desnecessario --}}
<mad-btn mad:click="onVerPedido">Ver Pedido</mad-btn>

{{-- CERTO: navigate vai direto, sem passar pelo servidor --}}
<mad-btn navigate="PedidoVendaDetalhe" params="{id: 42}" icon="eye">Ver Pedido</mad-btn>

{{-- ERRADO: onclick manual com JS verboso --}}
<mad-btn :attrs="'onclick=window.location...'">Ir</mad-btn>

{{-- CERTO --}}
<mad-btn navigate="OutraPagina">Ir</mad-btn>

{{-- ERRADO: href com URL hardcoded da rota interna do componente --}}
<mad-btn href="/admin/pagina-de-vendas?id=42">Ir</mad-btn>

{{-- CERTO: navigate resolve a rota pelo nome da classe MadComponent --}}
<mad-btn navigate="Pagina" params="{id: 42}">Ir</mad-btn>

Confirmacao antes de agir (confirm)#

confirm="mensagem" intercepta o clique e so executa a acao depois do usuario confirmar — sem onclick manual, sem window.confirm():

<mad-btn confirm="Excluir este pedido?" mad:click="onExcluir"
    variant="danger" icon="trash-2">Excluir</mad-btn>

<mad-btn confirm="Sair sem salvar?" navigate="PedidoVendaListagem">Voltar</mad-btn>

<mad-btn confirm="Confirmar o envio?" type="submit" variant="primary">Enviar</mad-btn>

Detalhes do comportamento:

• variant="danger" + confirm abre o dialogo no estilo destrutivo (Mad.confirm(msg, {danger:true})).
• Com navigate/target, o componente embrulha o onclick ja gerado em vez de acrescentar um segundo (atributo duplicado seria ignorado pelo browser) — e usa arrow function para preservar o this do handler inline.
• Com mad:click, vira data-mad-confirm e o proprio MadWire faz o gate.
• Com type="submit"/reset/href, usa Mad.confirmGate(event, msg), que cancela o evento e o re-dispara apos o OK.

{{-- ERRADO: confirmacao manual --}}
<mad-btn :attrs="'onclick=\"if(!confirm(\'Excluir?\')) return false;\"'">Excluir</mad-btn>

{{-- CERTO --}}
<mad-btn confirm="Excluir?" mad:click="onExcluir" variant="danger">Excluir</mad-btn>

Esconder/desabilitar pelo servidor (name)#

Quando o botao precisa reagir a estado do registro (ex: "Aprovar" some depois de aprovado), de um name a ele e controle pelo MadForm no controller — sem precisar de mad-if/Alpine:

<mad-btn name="btn_aprovar" mad:click="onAprovar" variant="success" icon="check">Aprovar</mad-btn>

public function onEdit(int $id): void
{
    $pedido = PedidoVenda::findOrFail($id);
    if ($pedido->status === 'aprovado') {
        $this->form->disable('btn_aprovar'); // continua visivel, mas clique bloqueado
        // ou: $this->form->hide('btn_aprovar'); // remove do DOM
    }
    $this->form->fill($pedido);
}

Resumo de decisao#

Preciso...	Usar
Ir para outra pagina/drawer/modal	navigate="Classe"
Esconder/desabilitar conforme estado do registro	name="x" + $this->form->hide('x')/disable('x')
Abrir drawer/modal por nome	open-drawer="nome" / open-modal="nome"
Executar acao no servidor (salvar, aprovar, etc)	mad:click="metodo"
Validar/buscar dados antes de navegar	mad:click="metodo" → MadResponse->script("Mad.go(...)")
Submeter formulario	type="submit" dentro de <mad-form>
Link externo	href="https://..."