---
layout: page
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 %}