---
title: Badges
summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
description: Add extra information with badges.
bootstrapLink: components/badge/
---
## Default markup
The default badges are square and come in the basic set of colors.
{% capture html -%}
BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Headings
{% capture html -%}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Outline badges
{% capture html -%}
blueazureindigopurplepinkredorangeyellowlimegreentealcyan
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Pill badges
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
{% capture html -%}
123456789101112
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Links
Place the badge within an `` element if you want it to perform the function of a link and make it clickable.
{% capture html -%}
BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Button with badge
Badges can be used as part of links or buttons to provide, for example, a counter.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}