Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Available Properties:
  • Examples

Was this helpful?

  1. Components

Badge

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

PreviousAlertsNextBlock

Last updated 1 year ago

Was this helpful?

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',
  ]
} %}
Bootstrap docs