---
layout: docs
title: Labels
group: components
---
Small and adaptive tag for adding context to just about any content.
## Example
Labels 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 label.
{% example html %}
Default
Primary
Success
Info
Warning
Danger
{% endexample %}
## Pill labels
Use the `.label-pill` modifier class to make labels 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 %}