botoes

Como utilizar os botões do BootstrapVue

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>
botoes 1

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>
botoes 2

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>
botoes 3

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>
botoes 4

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>
botoes 5

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>
botoes 6

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>
botoes 7

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

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy