Componentes · Ações

Botão

O botão é o que transforma uma tela em ferramenta: ele leva a pessoa para outro lugar, ou manda o sistema fazer alguma coisa. Você não escreve o clique: escolhe no painel entre abrir uma tela e executar um método, e diz o que é enviado junto.

<mad-btn> Paleta → Ações → Botão 2 botões por tela como destaque — o resto em menu
01

Navegar ou executar

Navegar manda a pessoa para outra tela; executar um método faz o sistema rodar uma rotina e responder na mesma tela, sem tirar ninguém do lugar.

Você querO que configurar
Abrir outra tela do sistemaNavegar para
Abrir o registro de uma linha sem sair da listaListagem, no botão da linha com Abrir em
Salvar o formulárioTipo do botão = submit
Rodar uma rotina e continuar na tela (aprovar, recalcular, enviar)Executar método PHP
Abrir um site ou documento fora do sistemaLink externo
Oferecer várias ações sem encher a tela de botõesDropdown
Um botão em cada linha de uma listaListagem
Um botão faz uma coisa. Preencher navegação e método ao mesmo tempo não executa os dois — e qual vence não é óbvio para quem lê a tela depois.
1

Colocar o botão na tela

  1. Abra a tela no Studio.
  2. Clique com o botão direito onde o botão deve ficar — em geral na barra de ações, no rodapé do formulário, ou no cabeçalho da página.
  3. Escolha Botão.
  4. Clique nele para o painel da direita mostrar as opções.
Resultado: o botão nasce com o rótulo provisório e sem ação nenhuma: ele ainda não faz nada ao ser clicado.
2

Decidir o que o clique faz

  1. Selecione o botão e abra a seção Eventos.
  2. Para rodar uma rotina, preencha Executar método PHP com o nome do método da tela — por exemplo onAprovar.
  3. Em Argumentos, informe o que esse método recebe: o código do registro, o valor de um campo, um valor fixo.
  4. Para abrir outra tela, abra o bloco Navegação e escolha a tela e o método dela.
  5. Para abrir um site ou documento fora do sistema, preencha Link externo em vez do destino.
Resultado para quem usa o sistema: o clique passa a fazer alguma coisa: ou a tela seguinte abre já no registro certo, ou a rotina roda e a resposta aparece ali mesmo.
Destaque
Painel de propriedades de um Botão com a seção Eventos aberta

Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.

O que o painel escreve no código

        

      

      
Botão sem ação é botão morto. Sem método e sem destino, o clique não faz nada — e não dá
erro nenhum. Se um botão parece travado, é o primeiro lugar para olhar.

      

        Destaque
        
        
        
        
      

      

        

          

            
Janela Editar argumentos, com a tabela de parâmetros vazia e o botão de adicionar

          

          
Clique no print para ampliar.

        

        

      

    


    

      
3
Escrever o texto e pedir confirmação

      
    
        
  1. Abra a seção Conteúdo.
    2. 
        
  2. Label: o texto do botão. Use um verbo do que vai acontecer — Salvar, Aprovar, Enviar por e-mail.
    3. 
        
  3. Confirmação: escreva a pergunta que aparece antes de executar. Só preencha em ação que não dá para desfazer.
    4. 
      

      
Resultado para quem usa o sistema: a pessoa lê no botão exatamente o que vai acontecer, e nas ações sem volta ainda recebe uma pergunta antes.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel do Botão com a seção Conteúdo aberta

          

        

        

      

    


    

      
4
Ajustar a aparência

      
    
        
  1. Abra a seção Estilo.
    2. 
        
  2. Variante define a cor e o peso: primary para a ação principal, secondary ou outline para as secundárias, danger para excluir.
    3. 
        
  3. Tamanho e Largura total ajustam o botão ao espaço — largura total funciona bem no celular.
    4. 
        
  4. Ícone ajuda a bater o olho; em barras cheias, o ícone sozinho economiza espaço.
    5. 
        
  5. Tipo do botão: use submit no botão que salva o formulário; os demais ficam em button.
    6. 
        
  6. Loading e Disabled deixam o botão ocupado ou indisponível.
    7. 
      

      
Resultado para quem usa o sistema: a tela deixa claro qual é a ação principal: um botão em destaque, os outros discretos — e o de excluir vermelho, difícil de clicar sem querer.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel do Botão com a seção Estilo aberta

          

        

        

      

      
Atributo HTML e ID existem para casos específicos — automação de teste, script próprio,
âncora de link. Se você não sabe que precisa, não precisa.

    


    

      
5
Testar antes de entregar

      
Salve a tela e publique no Teste online. Confira nesta ordem:

      

        

            
O que fazerO que tem que acontecer

            
Clicar no botãoAcontece exatamente o que o rótulo promete.

            
Clicar num botão com confirmaçãoA pergunta aparece antes de qualquer coisa acontecer.

            
Cancelar a confirmaçãoNada é executado.

            
Clicar num botão que abre outra telaA tela abre já no registro certo, não em branco.

            
Clicar num botão com Link externoO endereço abre fora do sistema, e esta tela continua aberta.

            
Abrir no celularOs botões continuam clicáveis e legíveis.

        

      

    


    

      
07
Problemas comuns

      
Clico e não acontece nada

      
O botão está sem ação: nem Executar método PHP, nem destino em Navegação. Preencha um
      dos dois — e só um.

      
O botão abre a tela certa, mas ela vem em branco

      
Faltam os Argumentos: a tela de destino não recebeu o código do registro e abriu como
      cadastro novo.

      
O botão salva o formulário quando eu só queria rodar uma rotina

      
O Tipo do botão está em submit. Troque para button — submit é do botão que salva.

      
A confirmação não aparece

      
O campo Confirmação está vazio. Ele é o texto da pergunta: sem texto, não há pergunta.

      
Todos os botões da tela parecem igualmente importantes

      
Todos estão com a mesma Variante. Deixe um em primary e passe os outros para
      secondary ou outline.

    


    

      
08
Referência: painel × código

      
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados.

      

        

            
No painelNo códigoPadrão

            
Labellabel—

            
Confirmaçãoconfirmsem confirmação

            
Executar método PHPmad:click—

            
Argumentosparams—

            
Navegar paranavigate—

            
Link externohref—

            
Tipo do botãotypebutton

            
Variantevariantprimary

            
Tamanhosizemédio

            
Íconeicon—

            
Cor do íconecolor—

            
Classe CSS extraclass—

            
Atributo HTMLattrs—

            
Largura totalblockdesligado

            
Loadingloadingdesligado

            
Disableddisableddesligado

            
IDid—