---
title: Badge
description: O componente Badge é uma ferramenta essencial na criação de páginas web, permitindo a adição de distintivos visuais que realçam informações importantes ou destacam elementos específicos. Os badges são dimensionados automaticamente para corresponder ao tamanho do elemento pai imediato, usando…
url: "https://gaianocode.com.br/docs/badge/"
updated: "2024-02-08"
category: Pages / Page Componentes / Boots Trap / Badge
---

# Badge

O componente Badge é uma ferramenta essencial na criação de páginas web, permitindo a adição de distintivos visuais que realçam informações importantes ou destacam elementos específicos. Os badges são dimensionados automaticamente para corresponder ao tamanho do elemento pai imediato, usando unidades e tamanhos de fonte relativos. A partir da versão 5. Com o Badge, você tem a flexibilidade de destacar itens relevantes de forma visualmente atraente, oferecendo uma maneira eficaz de chamar a atenção do usuário para informações cruciais ou elementos específicos em suas páginas web. Essa funcionalidade permite uma personalização detalhada da apresentação e do design do seu projeto, garantindo uma experiência de usuário coesa e intuitiva.

Para mais informações sobre o componente e exemplos acesse o site: [https://getbootstrap.com/docs/5.0/components/badge/](https://getbootstrap.com/docs/5.0/components/badge/).

![](https://gaianocode.com.br/wp-content/uploads/2024/02/Badge-1024x227.png)

## Localização

O componente Badge faz parte do conjunto de ferramentas fornecido pelo Bootstrap, o qual está integrado no WebComponents, como exemplificado abaixo:

![](https://gaianocode.com.br/wp-content/uploads/2024/02/Badge2.png)

## Propriedades

### Basic

As propriedades básicas do componente Badge incluem o seu tipo, contendo como única opção Badge, além do conteúdo do texto que estará contido nele.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/badge3.png)

### Params

O componente Badge disponibiliza propriedades de parâmetros que incluem class e box-size. A opção class refere-se à classe atribuída ao Badge, possibilitando a utilização de outros badges conhecidos ao alterar a class para a classe do badge desejado. Já o parâmetro box-size determina o tamanho do badge.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/badge4.png)