---
layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labeling component.
group: components
toc: true
---
## Example
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{% highlight html %}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{% endhighlight %}
## 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 %}
## Links
Using the `.badge` classes with the `` element quickly provide _actionable_ badges with hover and focus states.
{% example html %}
Default
Primary
Success
Info
Warning
Danger
{% endexample %}