Badge

Documentation and examples for badges, our small count and labeling component.

Bootstrap docs

Available Properties:

• 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.

Examples

Example #1: New post badge.

{% include 'radix:badge' with {
  badge_html_tag: 'a',
  color: 'primary',
  badge_url: forum.new_url,
  content: forum.new_text
} %}

Example #2: Pill badges with no color and custom classes.

{% include 'radix:badge' with {
  badge_html_tag: 'span',
  content: 'Success',
  badge_utility_classes: [
    'rounded-pill',
    'bg-success',
    'text-white',
  ]
} %}