Badge

Display a badge with different variants and styles.

Soft Solid Outline Blue Badge Badge Badge

<div class="flex flex-wrap items-center gap-2">
    <twig:ui:Badge>Soft</twig:ui:Badge>
    <twig:ui:Badge variant="solid">Solid</twig:ui:Badge>
    <twig:ui:Badge variant="outline">Outline</twig:ui:Badge>
    <twig:ui:Badge color="blue">Blue</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="purple">Badge</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="orange">Badge</twig:ui:Badge>
    <twig:ui:Badge color="sky">Badge</twig:ui:Badge>
</div>

Usage

Badge

<twig:ui:Badge>Badge</twig:ui:Badge>

Examples

Soft

Neutral Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<div class="flex flex-wrap gap-2">
    <twig:ui:Badge color="neutral">Neutral</twig:ui:Badge>
    <twig:ui:Badge color="red">Red</twig:ui:Badge>
    <twig:ui:Badge color="orange">Orange</twig:ui:Badge>
    <twig:ui:Badge color="amber">Amber</twig:ui:Badge>
    <twig:ui:Badge color="yellow">Yellow</twig:ui:Badge>
    <twig:ui:Badge color="lime">Lime</twig:ui:Badge>
    <twig:ui:Badge color="green">Green</twig:ui:Badge>
    <twig:ui:Badge color="emerald">Emerald</twig:ui:Badge>
    <twig:ui:Badge color="teal">Teal</twig:ui:Badge>
    <twig:ui:Badge color="cyan">Cyan</twig:ui:Badge>
    <twig:ui:Badge color="sky">Sky</twig:ui:Badge>
    <twig:ui:Badge color="blue">Blue</twig:ui:Badge>
    <twig:ui:Badge color="indigo">Indigo</twig:ui:Badge>
    <twig:ui:Badge color="violet">Violet</twig:ui:Badge>
    <twig:ui:Badge color="purple">Purple</twig:ui:Badge>
    <twig:ui:Badge color="fuchsia">Fuchsia</twig:ui:Badge>
    <twig:ui:Badge color="pink">Pink</twig:ui:Badge>
    <twig:ui:Badge color="rose">Rose</twig:ui:Badge>
</div>

Solid

Use the solid variant for a stronger, high-emphasis label.

Neutral Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<div class="flex flex-wrap gap-2">
    <twig:ui:Badge variant="solid" color="neutral">Neutral</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="red">Red</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="orange">Orange</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="amber">Amber</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="yellow">Yellow</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="lime">Lime</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="green">Green</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="emerald">Emerald</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="teal">Teal</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="cyan">Cyan</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="sky">Sky</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="blue">Blue</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="indigo">Indigo</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="violet">Violet</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="purple">Purple</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="fuchsia">Fuchsia</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="pink">Pink</twig:ui:Badge>
    <twig:ui:Badge variant="solid" color="rose">Rose</twig:ui:Badge>
</div>

Outline

Use the outline variant when the badge should blend into the background. The color prop tints the border and text.

Neutral Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<div class="flex flex-wrap gap-2">
    <twig:ui:Badge variant="outline" color="neutral">Neutral</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="red">Red</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="orange">Orange</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="amber">Amber</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="yellow">Yellow</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="lime">Lime</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="green">Green</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="emerald">Emerald</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="teal">Teal</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="cyan">Cyan</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="sky">Sky</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="blue">Blue</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="indigo">Indigo</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="violet">Violet</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="purple">Purple</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="fuchsia">Fuchsia</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="pink">Pink</twig:ui:Badge>
    <twig:ui:Badge variant="outline" color="rose">Rose</twig:ui:Badge>
</div>

Sizes

Small Medium Large

<div class="flex flex-wrap items-center gap-2">
    <twig:ui:Badge size="sm">Small</twig:ui:Badge>
    <twig:ui:Badge size="md">Medium</twig:ui:Badge>
    <twig:ui:Badge size="lg">Large</twig:ui:Badge>
</div>

With icon

Add data-icon="inline-start" or data-icon="inline-end" on the icon for the correct spacing.

Blue Green Purple

<div class="flex flex-wrap items-center gap-2">
    <twig:ui:Badge color="blue">
        <twig:ux:icon name="lucide:tag" data-icon="inline-start" />
        Blue
    </twig:ui:Badge>
    <twig:ui:Badge color="green">
        <twig:ux:icon name="lucide:tag" data-icon="inline-start" />
        Green
    </twig:ui:Badge>
    <twig:ui:Badge color="purple">
        <twig:ux:icon name="lucide:tag" data-icon="inline-start" />
        Purple
    </twig:ui:Badge>
</div>

As a link

Set as="a" to render the badge as a link.

Clickable badge

<twig:ui:Badge as="a" href="#">
    <twig:ux:icon name="lucide:link" data-icon="inline-start" />
    Clickable badge
</twig:ui:Badge>

RTL

Set dir="rtl" on a wrapping element to render badges for right-to-left languages.

أخضر أحمر

<div dir="rtl" class="flex flex-wrap items-center gap-2">
    <twig:ui:Badge color="green">
        <twig:ux:icon name="lucide:tag" data-icon="inline-start" />
        أخضر
    </twig:ui:Badge>
    <twig:ui:Badge color="red">أحمر</twig:ui:Badge>
</div>

API Reference

`<twig:ui:Badge>`

Prop	Type	Description
`variant`	`'soft'` \| `'solid'` \| `'outline'`	The visual style variant. Defaults to `soft`
`color`	`string`	Any Tailwind color name, such as `'purple'` or `'cyan'`. Defaults to `'neutral'`
`size`	`'sm'` \| `'md'` \| `'lg'`	The size of the badge. Defaults to `md`
`as`	`string`	The HTML tag to render. Defaults to `span`

Block	Description
`content`	The badge content, usually text and an optional icon