> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/badge.md).

# Badge

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/badge/)

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

```twig
{% 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.

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