Badge
Documentation and examples for badges, our small count and labeling component.
Last updated
Was this helpful?
Documentation and examples for badges, our small count and labeling component.
Last updated
Was this helpful?
HTML Tag (html_tag
):
The HTML tag to use for the badge.
Recommended to use: span
| div
| a
Default value: span
Background and Text Color (color
):
Background and Text Color. Set a background-color
with contrasting foreground color with our .text-bg-{color}
helpers. Previously it was required to manually pair your choice of .text-{color}
and .bg-{color}
utilities for styling, which you still may use if you prefer.
Recommended to use: -primary
| secondary
| success
| info
| warning
| danger
| light
| dark
Default value: secondary
Content (content
):
The content of the badge.
URL Link (url
):
The HTML tag will automatically be set to a if an anchor is added to the URL.
Utility Classes (badge_utility_classes
):
This property contains an array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.
Example #1: New post badge.
Example #2: Pill badges with no color and custom classes.