# 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',
  ]
} %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/badge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.