Se você já visitou repositórios no GitHub, com certeza reparou nos famosos badges (selos coloridos) que aparecem no topo do README.md.

Eles são pequenos elementos visuais que mostram informações importantes, como:

✔ Status do build

✔ Linguagem usada

✔ Versão do projeto

✔ Licença

✔ Frameworks

E a boa notícia: você pode criar o seu próprio badge de forma simples usando Markdown!

🛠️ 1. O que é um badge?

Um badge nada mais é do que uma imagem com link, geralmente gerada dinamicamente por serviços como o Shields.io.

Exemplo de um badge básico em Markdown:


🎨 2. Como personalizar um badge

Você pode usar o site Shields.io para gerar badges.

A estrutura da URL é:

https://img.shields.io/badge/<TEXTO>-<COR>.svg


Resultado >

🖌️ 4. Estilos disponíveis

Você pode mudar o estilo do badge adicionando ?style= na URL:

• flat →
• flat-square →
• for-the-badge →
• plastic →

🚀 5. Exemplos prontos para usar

Tecnologias:




📝 6. Como testar badges antes de colocar no GitHub

🔹 1. Shields.io

• É o site oficial para gerar badges.
• Você pode montar o código, escolher texto, cor, estilo e logo.
• Ele já mostra o preview ao vivo da badge antes de copiar o link.

🔹 2. Markdown Live Preview

• Você cola seu código Markdown (incluindo badges).
• Ele mostra como vai aparecer no GitHub/README.
• Útil para testar vários badges juntos.

🔹 3. Extensão do VS Code – Markdown Preview Enhanced

• No próprio editor, você consegue visualizar badges antes de enviar para o GitHub.
• Basta abrir o .md e usar Ctrl + Shift + V (ou ⌘ + Shift + V no Mac).

📌 Conclusão

Badges deixam seu README.md muito mais atrativo e informativo ✨.

Eles podem mostrar status, tecnologias usadas, redes sociais e até métricas do projeto.

👉 Experimente adicionar badges no seu próximo projeto na DIO!

#Markdown #GitHub #DIO #OpenSource #FrontEnd #Dev