View as Markdown

Badge

Displays a badge or a component that looks like a badge.

Loading... 
<div class="flex w-full flex-wrap justify-center 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>

Installation

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

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;default&#039;|&#039;secondary&#039;|&#039;destructive&#039;|&#039;outline&#039;|&#039;ghost&#039;|&#039;link&#039; The visual style variant. #}
{# @prop as &#039;span&#039; The HTML tag to render. #}
{# @block content The badge label or content. #}
{%- props variant = &#039;default&#039;, as = &#039;span&#039; -%}
{%- set style = html_cva(
    base: &#039;group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3!&#039;,
    variants: {
        variant: {
            default: &#039;bg-primary text-primary-foreground [a]:hover:bg-primary/80&#039;,
            secondary: &#039;bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80&#039;,
            destructive: &#039;bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20&#039;,
            outline: &#039;border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground&#039;,
            ghost: &#039;hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50&#039;,
            link: &#039;text-primary underline-offset-4 hover:underline&#039;,
        },
    },
) -%}
&lt;{{ as }}
    data-slot=&quot;badge&quot;
    data-variant=&quot;{{ variant }}&quot;
    class=&quot;{{ style.apply({variant: variant}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/{{ as }}&gt;

Usage

<twig:Badge variant="default | outline | secondary | destructive">
    Badge
</twig:Badge>

Examples

Variants

Use the variant prop to change the variant of the badge.

Loading... 
<div class="flex flex-wrap gap-2">
    <twig:Badge>Default</twig:Badge>
    <twig:Badge variant="secondary">Secondary</twig:Badge>
    <twig:Badge variant="destructive">Destructive</twig:Badge>
    <twig:Badge variant="outline">Outline</twig:Badge>
    <twig:Badge variant="ghost">Ghost</twig:Badge>
</div>

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

Loading... 
<div class="flex flex-wrap gap-2">
    <twig:Badge variant="secondary">
        <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
        Verified
    </twig:Badge>
    <twig:Badge variant="outline">
        Bookmark
        <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
    </twig:Badge>
</div>

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner.

Loading... 
<div class="flex flex-wrap gap-2">
    <twig:Badge variant="destructive">
        <twig:Spinner data-icon="inline-start" />
        Deleting
    </twig:Badge>
    <twig:Badge variant="secondary">
        Generating
        <twig:Spinner data-icon="inline-end" />
    </twig:Badge>
</div>

Link

Use the as prop to render a link as a badge.

Loading... 
<twig:Badge as="a" href="#link">
    Open Link
    <twig:ux:icon name="lucide:arrow-up-right" data-icon="inline-end" />
</twig:Badge>

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

Loading... 
<div class="flex flex-wrap gap-2">
    <twig:Badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</twig:Badge>
    <twig:Badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</twig:Badge>
    <twig:Badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</twig:Badge>
    <twig:Badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">Purple</twig:Badge>
    <twig:Badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</twig:Badge>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

Loading... 
<div class="flex flex-col gap-6">
    <div class="flex w-full flex-wrap justify-center gap-2" dir="rtl">
        <twig:Badge>شارة</twig:Badge>
        <twig:Badge variant="secondary">ثانوي</twig:Badge>
        <twig:Badge variant="destructive">مدمر</twig:Badge>
        <twig:Badge variant="outline">مخطط</twig:Badge>
        <twig:Badge variant="secondary">
            <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
            متحقق
        </twig:Badge>
        <twig:Badge variant="outline">
            إشارة مرجعية
            <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
        </twig:Badge>
    </div>
    <div class="flex w-full flex-wrap justify-center gap-2" dir="rtl">
        <twig:Badge>תג</twig:Badge>
        <twig:Badge variant="secondary">משני</twig:Badge>
        <twig:Badge variant="destructive">הרסני</twig:Badge>
        <twig:Badge variant="outline">קווי מתאר</twig:Badge>
        <twig:Badge variant="secondary">
            <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
            מאומת
        </twig:Badge>
        <twig:Badge variant="outline">
            סימנייה
            <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
        </twig:Badge>
    </div>
</div>

API Reference

<twig:Badge>

Prop Type Default
variant 
 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' 'default'
as 
 'span' 'span'
Block Description
content The badge label or content.