Badge

Pending

<flux:badge>Pending</flux:badge>

Colors

Any Tailwind color name. Without one, the badge is zinc.

Default

Cancelled

Pending

Ships today

Delivered

Shipping

Featured

Subscription

Offer

<flux:badge>Default</flux:badge>
<flux:badge color="red">Cancelled</flux:badge>
<flux:badge color="amber">Pending</flux:badge>
<flux:badge color="lime">Ships today</flux:badge>
<flux:badge color="green">Delivered</flux:badge>
<flux:badge color="blue">Shipping</flux:badge>
<flux:badge color="indigo">Featured</flux:badge>
<flux:badge color="purple">Subscription</flux:badge>
<flux:badge color="pink">Offer</flux:badge>

Sizes

Small

Base

Large

<flux:badge size="sm" color="lime">Small</flux:badge>
<flux:badge color="lime">Base</flux:badge>
<flux:badge size="lg" color="lime">Large</flux:badge>

Solid

A filled badge for when the label needs to carry more weight.

Sold out

Flash sale

Draft

<flux:badge variant="solid" color="red">Sold out</flux:badge>
<flux:badge variant="solid" color="amber" icon="bolt">Flash sale</flux:badge>
<flux:badge variant="solid">Draft</flux:badge>

Rounded

Verified

New

<flux:badge rounded color="green" icon="check-circle">Verified</flux:badge>
<flux:badge rounded variant="solid" color="blue">New</flux:badge>

Icons

Leading and trailing icons. In RTL, "leading" is the right-hand side — Flux uses logical properties, so no direction-specific classes are needed.

Shipping

Details

<flux:badge icon="truck" color="blue">Shipping</flux:badge>
<flux:badge icon:trailing="arrow-up-right" color="zinc">Details</flux:badge>

Dismissible

Add flux:badge.close for a removable filter chip.

Under 500,000 Toman

<flux:badge color="zinc">
    Under 500,000 Toman
    <flux:badge.close />
</flux:badge>

Reference

flux:badge

Prop	Description
color	Any Tailwind color (e.g. `red`, `lime`). Default: zinc.
variant	Options: `solid`. Default: soft/tinted.
size	Options: `sm`, `lg`. Default: base.
rounded	If `true`, a pill instead of a rounded rectangle.
icon	Leading icon name.
icon:trailing	Trailing icon name.
icon:variant	Icon variant. Default: `micro`.
label	Badge text, as an alternative to the slot.
inset	Negative margins so the badge does not add height: `top`, `right`, `bottom`, `left`.

flux:badge.close

A close button for a dismissible badge.

Prop	Description
icon	Icon name. Default: `x-mark`.