badge.md

layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labeling 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 %}

Links

Using the .badge classes with the <a> element quickly provide actionable badges with hover and focus states.

{% example html %} Default Primary Success Info Warning Danger {% endexample %}