Badge

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

<div class="flex justify-center gap-4">
    <twig:Badge variant="brand">Brand</twig:Badge>
    <twig:Badge variant="alternative">Alternative</twig:Badge>
    <twig:Badge variant="gray">Gray</twig:Badge>
    <twig:Badge variant="danger">Danger</twig:Badge>
    <twig:Badge variant="success">Success</twig:Badge>
    <twig:Badge variant="warning">Warning</twig:Badge>
</div>

Installation

bin/console ux:install badge --kit flowbite-4

That's it!

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Badge.html.twig

{# @prop variant 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `rounded` #}
{# @prop border 'none'|'bordered' The badge border. Defaults to `none` #}
{# @prop as 'div' The HTML tag to render. Defaults to `div` #}
{# @block content The badge label or content #}
{%- props variant = 'brand', size = 'default', shape = 'rounded', border = 'none', as = 'div' -%}
{%- set style = html_cva(
    base: 'inline-flex items-center justify-center font-medium',
    variants: {
        variant: {
            brand: 'bg-brand-softer text-fg-brand-strong border-brand-subtle [a&]:hover:bg-brand-soft',
            alternative: 'bg-neutral-primary-soft text-heading border-default [a&]:hover:bg-neutral-secondary-medium',
            gray: 'bg-neutral-secondary-medium text-heading border-default-medium [a&]:hover:bg-neutral-tertiary-medium',
            danger: 'bg-danger-soft text-fg-danger-strong border-danger-subtle [a&]:hover:bg-danger-medium',
            success: 'bg-success-soft text-fg-success-strong border-success-subtle [a&]:hover:bg-success-medium',
            warning: 'bg-warning-soft text-fg-warning border-warning-subtle [a&]:hover:bg-warning-medium',
        },
        size: {
            default: 'px-1.5 py-0.5 text-xs',
            lg: 'px-2 py-1 text-sm',
        },
        shape: {
            rounded: 'rounded',
            pill: 'rounded-full',
        },
        border: {
            none: '',
            bordered: 'border',
        },
    },

) -%}
<{{ as }}
    class="{{ style.apply({variant: variant, size: size, shape: shape, border: border}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

Happy coding!

Usage

<twig:Badge
    variant="brand | alternative | gray | danger | success | warning"
    size="default | lg"
    shape="rounded | pill"
    border="none | bordered"
>
    Badge
</twig:Badge>

Examples

Bordered badges

This example can be used to add a border accent to the badge component.

<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" border="bordered">Brand</twig:Badge>
    <twig:Badge variant="alternative" border="bordered">Alternative</twig:Badge>
    <twig:Badge variant="gray" border="bordered">Gray</twig:Badge>
    <twig:Badge variant="danger" border="bordered">Danger</twig:Badge>
    <twig:Badge variant="success" border="bordered">Success</twig:Badge>
    <twig:Badge variant="warning" border="bordered">Warning</twig:Badge>
</div>

Large badges

<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" size="lg">Brand</twig:Badge>
    <twig:Badge variant="alternative" size="lg">Alternative</twig:Badge>
    <twig:Badge variant="gray" size="lg">Gray</twig:Badge>
    <twig:Badge variant="danger" size="lg">Danger</twig:Badge>
    <twig:Badge variant="success" size="lg">Success</twig:Badge>
    <twig:Badge variant="warning" size="lg">Warning</twig:Badge>
</div>

Pill badges

Use this example to make the corners even more rounded like pills for the badge component.

<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" shape="pill">Brand</twig:Badge>
    <twig:Badge variant="alternative" shape="pill">Alternative</twig:Badge>
    <twig:Badge variant="gray" shape="pill">Gray</twig:Badge>
    <twig:Badge variant="danger" shape="pill">Danger</twig:Badge>
    <twig:Badge variant="success" shape="pill">Success</twig:Badge>
    <twig:Badge variant="warning" shape="pill">Warning</twig:Badge>
</div>

Badges as link

You can also use badges as anchor elements to link to another page.

<div class="flex justify-center gap-4">
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="brand" border="bordered">Brand</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="alternative" border="bordered">Alternative</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="gray" border="bordered">Gray</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="danger" border="bordered">Danger</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="success" border="bordered">Success</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="warning" border="bordered">Warning</twig:Badge>
</div>

Badges with icon

You can also use SVG icons inside the badge elements.

<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="alternative" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="gray" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="danger" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="success" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="warning" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
</div>

API Reference

Badge

Prop	Type	Description
`variant`	`'brand'\|'alternative'\|'gray'\|'danger'\|'success'\|'warning'`	The visual style variant. Defaults to `brand`
`size`	`'default'\|'lg'`	The badge size. Defaults to `default`
`shape`	`'rounded'\|'pill'`	The badge shape. Defaults to `rounded`
`border`	`'none'\|'bordered'`	The badge border. Defaults to `none`
`as`	`'div'`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	The badge label or content