Badges

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 22 de 35.

Badges são pequenos indicadores usados para mostrar contagens ou status ao lado de outro elemento. Exemplo: um círculo vermelho com um número mostrando mensagens não lidas. Eles são frequentemente anexados a botões, ícones ou fotos de perfil.

Por que eles são importantes:

Eles tornam informações importantes (como notificações) rapidamente visíveis.
Comumente usados em aplicativos, redes sociais e sites de e-commerce.

Vamos criar um badge simples:

Primeiro, crie um elemento HTML básico para conter seu badge:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

Em seguida, adicione um pouco de CSS básico para estilizar o badge:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

Com isso, o badge fica no canto do botão mostrando o número de mensagens.

Desafio

Fácil

Você recebeu um HTML com vários botões. Sua tarefa é criar badges que apareçam no canto superior direito de cada botão usando apenas CSS. Sua tarefa:

Defina a posição do badge: Use position: absolute para que você possa posicioná-lo em relação ao botão.
Coloque-o no canto superior direito: Use valores negativos para top e right.
Defina as cores e o texto: Use um fundo vermelho e texto branco.
Ajuste a fonte e o preenchimento: Defina font-size: 12px; font-weight: bold; padding: 4px 7px;.
Torne-o circular e adicione profundidade: Use border-radius e uma pequena sombra (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Folha de consulta

Badges são pequenos indicadores usados para mostrar contagens ou status ao lado de outro elemento, comumente anexados a botões, ícones ou fotos de perfil.

Estrutura HTML básica:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

Estilização CSS para badges:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

Propriedades principais:

position: absolute - permite o posicionamento preciso em relação ao pai
Valores negativos de top e right - posicionam o badge fora do elemento pai
border-radius: 50% - cria uma forma circular
box-shadow - adiciona profundidade e separação visual

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>