Badge

<div class="flex flex-col items-center gap-2">
    <div class="flex w-full flex-wrap gap-2">
        <twig:Badge>Badge</twig:Badge>
        <twig:Badge variant="secondary">Secondary</twig:Badge>
        <twig:Badge variant="destructive">Destructive</twig:Badge>
        <twig:Badge variant="outline">Outline</twig:Badge>
    </div>
    <div class="flex w-full flex-wrap gap-2">
        <twig:Badge
            variant="secondary"
            class="bg-blue-500 text-white dark:bg-blue-600"
        >
            <BadgeCheckIcon />
            Verified
        </twig:Badge>
        <twig:Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
            8
        </twig:Badge>
        <twig:Badge
            class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
            variant="destructive"
        >
            99
        </twig:Badge>
        <twig:Badge
            class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
            variant="outline"
        >
            20+
        </twig:Badge>
    </div>
</div>

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

{# @prop variant 'default'|'secondary'|'destructive'|'outline' The variant, default to `default` #}
{# @prop as 'div' The HTML tag to use, default to `div` #}
{# @block content The default block #}
{%- props variant = 'default', as = 'div' -%}
{%- set style = html_cva(
    base: 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
    variants: {
        variant: {
            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        },
    },
) -%}
<{{ as }}
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

<twig:Badge as="a" href="https://ux.symfony.com/" variant="default">
    Symfony UX
</twig:Badge>