Bootstrap 5 badges doesn't work like bs4.

So instead of this :

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

we need to use these bs5 classes :

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

We'll need to rewrite how badge.twig works.
I propose this :

{#
/**
 * @file
 * Template for a Badge component.
 *
 * Available config:
 * - html_tag: The HTML tag to use for the bade. Defaults to span.
 * - bg: primary | secondary | success | danger | warning | info | light | dark
 * - color: primary | secondary | success | danger | warning | info | light | dark | body | white
 * - utility_classes: An array of utility classes.
 * - content: The content of the badge.
 * - url: if anchor add a url, html_tag will be set to a automatically.
 */
#}
{% set classes = [
  'badge',
  bg ? 'bg-' ~ bg : 'bg-primary',
  color ? 'text-' ~ color,
]|merge(utility_classes ? utility_classes : []) %}

{% set html_tag = html_tag ?? 'span' %}

{% if url %}
  {% set html_tag = 'a' %}
  {% set url = url|render %}
{% endif %}

{% if content %}
  <{{ html_tag }} {{ url ? 'href=' ~ url }} class="{{ classes|join(' ') }}">

  {% block content %}
    {{ content }}
  {% endblock %}

  </{{ html_tag }}>
{% endif %}

So we'd use it this way :

{#
/**
 * @file
 * Template for field_tags.
 */
#}
{% for item in items %}
  {% include '@THEME_NAME/badge/badge.twig' with {
    bg: 'primary',
    color: 'white',
    content: item.content['#title'],
    url: item.content['#url'],
  } %}
{% endfor %}

Comments

JFKiwad created an issue. See original summary.

doxigo’s picture

Status: Active » Fixed

Hey Jean-François 👋

Your proposed solution sounds quite right, thanks for that.
updated on the latest 5.x-dev

  • doxigo committed 9de6607 on 5.0.x authored by JFKiwad
    Issue #3221606 by JFKiwad: Color problem for bootstrap 5's badges
    
JFKiwad’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.