View as Markdown

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.

Loading... 
<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

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

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 app:

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

) -%}
&lt;{{ as }}
    class=&quot;{{ style.apply({variant: variant, size: size, shape: shape, border: border}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/{{ as }}&gt;

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.

Loading... 
<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

Loading... 
<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.

Loading... 
<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.

Loading... 
<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.

Loading... 
<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

<twig:Badge>

Prop Type Default
variant 
 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' 'brand'
size 
 'default'|'lg' 'default'
shape 
 'rounded'|'pill' 'rounded'
border 
 'none'|'bordered' 'none'
as 
 'div' 'div'
Block Description
content The badge label or content.