Introdução
Os botões são um recurso necessário em todos os sistemas, com eles é possível enviar formulários para salvar e editar dados, também é possível utilizar para navegar entre itens ou páginas, colocar para ações na tela e entre outros.
O BootstrapVue tem uma grande variação para os botões, como é um recurso muito utilizado nos sistemas, é interessante que ele consiga se adaptar a muitas situações.
Para utilizar o botão o componente é o b-button, veja como utilizar em sua forma padrão e suas variações:
Botões padrão
Em sua forma padrão, o botão é da cor cinza e com a borda levemente arredondada, dentro de sua declaração é possível colocar um texto para indicar a ação para o usuário
<b-button>Botão exemplo</b-button>
Variação de cor
Assim como outros elementos no BootstrapVue, é possível adicionar a variação de cor para o botão. As cores possíveis são as cores padrão do BootstrapVue.
Para fazer a configuração da cor, é possível passar a prop variant.
<b-button variant="danger">Botão</b-button>
<b-button variant="success">Botão</b-button>
<b-button variant="primary">Botão</b-button>
Também nas cores, é possível configurar para que o botão tenha a cor branca, mas ao passar o mouse por cima trocar para as cores padrão, é o botão outline.
Por exemplo, o botão danger, irá ficar inicialmente com as bordas vermelhas, cor do texto vermelha e cor dentro do botão como branco, porém ao passar o mouse por cima, o texto fica branco e todo o resto fica vermelho.
Esse botão tem uma estilização diferente, porém fica um efeito bem legal e pode combinar com o seu sistema.
<b-button variant="outline-danger">Botão</b-button>
<b-button variant="outline-success">Botão</b-button>
<b-button variant="outline-primary">Botão</b-button>
Link no botão
É possível adicionar um link no botão, e com isso o usuário pode navegar para outra página dentro do seu sistema. Um exemplo de uso desse recurso é em listagens, onde a última coluna da tabela tem um botão para editar um registro.
O link pode ser um href comum, ou também uma rota do Vue Router.
<b-button to="nome.rota">Botão</b-button>
<b-button href="#">Botão</b-button>
Controlar o tamanho
Por padrão, o BootstrapVue disponibiliza três tamanhos de botão, um pequeno, o normal e o grande.
Também é possível trocar o tamanho via CSS, porém, como ele já tem esses três tamanhos como padrão, na teoria é sempre melhor utilizar, porque vai se adaptar bem ao layout do BootstrapVue.
O tamanho é configurado pela prop size, podendo ser sm (pequeno) ou lg (grande). Caso queira o tamanho padrão, não passe a prop pro botão.
<b-button size="sm">Botão</b-button>
<b-button>Botão</b-button>
<b-button size="lg">Botão</b-button>
Bordas arrendondadas
Este efeito eu particularmente gosto bastante, é possível fazer com que os botões fiquem com todas as bordas arrendondadas colocando um efeito de pirula. Para fazer isso é a prop pill.
<b-button pill variant="success">Botão</b-button>
<b-button pill variant="outline-danger">Botão</b-button>
<b-button pill variant="info">Botão</b-button>
Essa prop pode ser utilizada com as variações de cor normalmente.
Bordas quadradas
Se em vez de arredondado, quiser todos os botões em um estilo quadrado, então é possível fazer com a prop squared.
<b-button squared variant="success">Botão</b-button>
<b-button squared variant="outline-danger">Botão</b-button>
<b-button squared variant="info">Botão</b-button>
Botão desabilitado
Este recurso normalmente é utilizado quando o usuário já clicou para enviar o formulário, porém os dados não foram validados, então é uma boa prática não deixar o usuário tentar enviar novamente, e para isso é preciso desabilitar o botão.
Para desabilitar é preciso passar a prop disabled, caso passe com o valor true, o botão ficará desabilitado e o usuário não consegue clicar, caso passe o valor false, o botão volta ao normal.
<b-button disabled>Botão</b-button>
<b-button :disabled="false">Botão</b-button>
<b-button :disabled="true">Botão</b-button>
Caso envie o true/false, é necessário passar o dois pontos (:) para que o Vue interprete o valor, caso contrário ele irá interpretar tudo como string e retornará true.
Dica extra
O botão do BootstrapVue tem muitas variações e combinações tanto de estilo quanto de controles de estado, recomendo que procure o qual botão você prefere e utilize o mesmo no sistema todo.
Isso porque fica mais fácil manter o padrão visual do sistema, mais fácil para dar manutenção também. Compensa criar um componente de base, com todas as configurações e depois utilizar sempre este mesmo componente.
Vídeo sobre o assunto
Gravei um vídeo sobre os botões do BootstrapVue e coloquei na prática a dica extra, recomendo que assista:
Código fonte
Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Referências
https://bootstrap-vue.org/docs/components/button
https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping