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
Comment #2
doxigo commentedHey Jean-François 👋
Your proposed solution sounds quite right, thanks for that.
updated on the latest
5.x-devComment #4
JFKiwad