Badge

A small count or label used to highlight status, counts, or short contextual information.

100%

<div class="d-flex flex-wrap align-items-center gap-2">
    <twig:Badge color="primary">New</twig:Badge>
    <twig:Badge color="success">Published</twig:Badge>
    <twig:Badge color="warning">Pending</twig:Badge>
    <twig:Badge color="danger" pill>99+</twig:Badge>
    <button type="button" class="btn btn-primary position-relative ms-2">
        Inbox
        <twig:Badge color="danger" pill class="position-absolute top-0 start-100 translate-middle">
            12
            <span class="visually-hidden">unread messages</span>
        </twig:Badge>
    </button>
</div>

Installation

php bin/console ux:install badge --kit bootstrap

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop color &#039;primary&#039;|&#039;secondary&#039;|&#039;success&#039;|&#039;danger&#039;|&#039;warning&#039;|&#039;info&#039;|&#039;light&#039;|&#039;dark&#039; The Bootstrap contextual color. #}
{# @prop pill boolean Whether to use Bootstrap&#039;s rounded pill style. #}
{# @prop label string The fallback badge text when no content block is provided. #}
{# @block content The badge text and optional inline content. #}
{%- props
    color = &#039;primary&#039;,
    pill = false,
    label = &#039;&#039;
-%}

{%- set classes = html_classes({
    badge: true,
    (&#039;text-bg-&#039; ~ color): true,
    &#039;rounded-pill&#039;: pill,
}) -%}

&lt;span {{ attributes.defaults({class: classes}) }}&gt;
    {%- block content -%}
        {{- label -}}
    {%- endblock -%}
&lt;/span&gt;

Usage

<twig:Badge>New</twig:Badge>

Accessibility

Do not rely on badge color alone to communicate meaning. Include meaningful visible text or additional context with Bootstrap's visually-hidden utility.

When a badge contains a count, make sure its relationship to the surrounding heading, button, or link is clear to assistive technologies.

Examples

Headings

Badges inherit their size from the immediate parent, so they scale naturally inside headings.

100%

<h1>Example heading <twig:Badge color="secondary">New</twig:Badge></h1>
<h2>Example heading <twig:Badge color="secondary">New</twig:Badge></h2>
<h3>Example heading <twig:Badge color="secondary">New</twig:Badge></h3>
<h4>Example heading <twig:Badge color="secondary">New</twig:Badge></h4>
<h5>Example heading <twig:Badge color="secondary">New</twig:Badge></h5>
<h6>Example heading <twig:Badge color="secondary">New</twig:Badge></h6>

Buttons

Place a badge inside a button to display a related count.

100%

<button type="button" class="btn btn-primary">
    Notifications <twig:Badge color="secondary">4</twig:Badge>
</button>

Positioned

Combine badges with Bootstrap's position utilities to create counters and status indicators.

100%

<div class="d-flex align-items-center gap-5">
    <button type="button" class="btn btn-primary position-relative">
        Inbox
        <twig:Badge color="danger" pill class="position-absolute top-0 start-100 translate-middle">
            99+
            <span class="visually-hidden">unread messages</span>
        </twig:Badge>
    </button>

    <button type="button" class="btn btn-primary position-relative">
        Profile
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
            <span class="visually-hidden">New alerts</span>
        </span>
    </button>
</div>

Background colors

Use contextual background colors while keeping the badge's meaning clear from its text.

100%

<div class="d-flex flex-wrap gap-2">
    <twig:Badge color="primary">Primary</twig:Badge>
    <twig:Badge color="secondary">Secondary</twig:Badge>
    <twig:Badge color="success">Success</twig:Badge>
    <twig:Badge color="danger">Danger</twig:Badge>
    <twig:Badge color="warning">Warning</twig:Badge>
    <twig:Badge color="info">Info</twig:Badge>
    <twig:Badge color="light">Light</twig:Badge>
    <twig:Badge color="dark">Dark</twig:Badge>
</div>

Pill badges

Use the pill style for a more rounded badge with a larger border radius.

100%

<div class="d-flex flex-wrap gap-2">
    <twig:Badge color="primary" pill>Primary</twig:Badge>
    <twig:Badge color="secondary" pill>Secondary</twig:Badge>
    <twig:Badge color="success" pill>Success</twig:Badge>
    <twig:Badge color="danger" pill>Danger</twig:Badge>
    <twig:Badge color="warning" pill>Warning</twig:Badge>
    <twig:Badge color="info" pill>Info</twig:Badge>
    <twig:Badge color="light" pill>Light</twig:Badge>
    <twig:Badge color="dark" pill>Dark</twig:Badge>
</div>

API Reference

`<twig:Badge>`

Prop	Type	Default
`color`	`'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'`	`'primary'`
`pill`	`boolean`	`false`
`label`	`string`	`''`

Block	Description
`content`	The badge text and optional inline content.