badge

Como usar o badge do BootstrapVue

Introdução

O badge é um componente do BootstrapVue e ele serve para destacar algumas informações na tela.

Normalmente quando há algo novo no sistema ou alguma notificação para o usuário, se usa para fazer essa marcação.

É um recurso simples e interessante que pode dar um profissionalismo a mais no sistema desenvolvido.

Normalmente são utilizados junto com algum outro recurso, como algum texto, ícone, menus e etc.

Componente padrão

Para adicionar um badge no BootstrapVue, o código é o seguinte:

<b-badge>Teste de badge</b-badge>

E este será o resultado:

badge 1

No estilo padrão, ele ficará com um texto ou valor no meio e com um background, que já vou mostrar como mudar de cor.

Fato é que normalmente ele não é utilizado sozinho, ele sempre acompanha algo para dar ênfase, vejamos algumas configurações deles e depois exemplos onde podem ser utilizados.

Trocar a cor de fundo

Para trocar a cor de fundo, é similar com os outros componentes do BootstrapVue, utiliza-se a prop variant para fazer esse controle:

<b-badge variant="primary" class="mr-2">Primary</b-badge>
<b-badge variant="secondary" class="mr-2">Secondary</b-badge>
<b-badge variant="success" class="mr-2">Success</b-badge>
<b-badge variant="danger" class="mr-2">Danger</b-badge>
<b-badge variant="warning" class="mr-2">Warning</b-badge>
<b-badge variant="info" class="mr-2">Info</b-badge>
<b-badge variant="light" class="mr-2">Light</b-badge>
<b-badge variant="dark" class="mr-2">Dark</b-badge>

As classes mr-2 foram adicionadas somente para dar um espaçamento entre os badges, elas não fazem parte do componente necessariamente. Este é o resultado do código acima:

badge 2

Bordas arredondadas

Caso queira, é possível configurá-los para ter bordas arredondadas, pode ser um efeito visual diferente e pode se adaptar melhor ao seu sistema, caso já use isso para outros componentes como botões por exemplo. Veja o código:

<b-badge pill variant="primary" class="mr-2">Primary</b-badge>
<b-badge pill variant="secondary" class="mr-2">Secondary</b-badge>
<b-badge pill variant="success" class="mr-2">Success</b-badge>
badge 3

Adicionar links

É possível colocar links para redirecionar seja internamente ou externamente. Os links podem ser um href com o link completo, ou até uma rota do vue-router utilizando a prop to.

<b-badge variant="primary" href="#" class="mr-2">Href</b-badge>
<b-badge variant="primary" to="#" class="mr-2">Router link</b-badge>

Textos

Como citei anteriormente, é comum os badges serem utilizados com algum outro componente, um caso interessante é com textos, pode ser colocado para marcar algo novo no sistema, dar destaque a alguma informação e entre outras possibilidades. Veja um exemplo:

<h2>Titulo da funcionalidade <b-badge>New</b-badge></h2>
badge 4

No caso acima, está marcando como uma nova funcionalidade do sistema. O tamanho do badge nesse caso, vai acompanhar o tamanho do texto, como é um h2, ele fica de um tamanho maior, caso fosse um h6, ficaria menor por exemplo.

Botões

Outro caso de uso comum, é em botões e seu texto como um número. Por exemplo, em determinado local do sistema, informa a quantidade de notificações que o usuário tem para ler, pode ser colocado um badge para dar esse destaque.

badge 5

Vídeo sobre o badge

Caso queira, gravei um vídeo sobre o badge do BootstrapVue:

Código fonte

Além do botão, para notificações é muito comum colocar em ícones de sino.

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.

Conclusão

O badge é um recurso interessante implementado no BootstrapVue e pode ser bastante útil, vale a pena conhecer e saber como se usa para aplicar no lugar correto, dando uma profissionalidade a mais na forma de passar as informações para o usuário dentro do sistema. Até o próximo post 🙂

Referências

https://bootstrap-vue.org/docs/components/badge

https://celke.com.br/artigo/como-usar-badges-do-bootstrap#:~:text=Os%20badges%20servem%20para%20destacar,itens%20novos%20ou%20n%C3%A3o%20lidos.

Este conteúdo te ajudou de alguma forma?