---
layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labelling component.
group: components
---
Small and adaptive tag for adding context to just about any content.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Example
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
{% example html %}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{% endexample %}
## Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
{% example html %}
Default
Primary
Success
Info
Warning
Danger
{% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Pill badges
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %}
Default
Primary
Success
Info
Warning
Danger
{% endexample %}