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