Badge Component

Small Medium Large

<Badge Text="Small"  Size="sm" Color="brand" />
<Badge Text="Medium" Size="md" Color="brand" />
<Badge Text="Large"  Size="lg" Color="brand" />

Pill Rounded Pill Rounded

<Badge Text="Pill"    Size="md" Color="brand" Shape="pill" />
<Badge Text="Rounded" Size="md" Color="brand" Shape="rounded" />
<Badge Text="Pill"    Size="lg" Color="brand" Shape="pill" />
<Badge Text="Rounded" Size="lg" Color="brand" Shape="rounded" />

GrayBrandErrorWarningSuccessGray-blueBlue-lightBlueIndigoPurplePinkOrange

@* Colors: gray, brand, error, warning, success,
   gray-blue, blue-light, blue, indigo, purple, pink, orange *@
<Badge Text="Brand"   Size="md" Color="brand" />
<Badge Text="Success" Size="md" Color="success" />
<Badge Text="Warning" Size="md" Color="warning" />
<Badge Text="Error"   Size="md" Color="error" />

GrayBrandErrorWarningSuccessGray-blueBlue-lightBlueIndigoPurplePinkOrange

<Badge Text="Brand"   Size="md" Color="brand"   Outline="true" />
<Badge Text="Success" Size="md" Color="success" Outline="true" />
<Badge Text="Warning" Size="md" Color="warning" Outline="true" />
<Badge Text="Error"   Size="md" Color="error"   Outline="true" />

Label Label Label Label

<Badge Text="Label" Size="sm" Color="gray"    ShowDot="true" />
<Badge Text="Label" Size="md" Color="brand"   ShowDot="true" />
<Badge Text="Label" Size="lg" Color="success" ShowDot="true" />
<Badge Text="Label" Size="lg" Color="error"   ShowDot="true" Outline="true" />

Removable Removable Removable

<Badge Text="Removable" Size="sm" Color="gray"  ShowClose="true" />
<Badge Text="Removable" Size="md" Color="brand" ShowClose="true" />
<Badge Text="Removable" Size="lg" Color="error" ShowClose="true" />

View all View all View all

<Badge Text="View all" Size="sm" Color="gray"    ShowArrow="true" />
<Badge Text="View all" Size="md" Color="brand"   ShowArrow="true" />
<Badge Text="View all" Size="lg" Color="success" ShowArrow="true" />

Messages5 Messages12 Errors99

<Badge Text="Messages" Size="sm" Color="gray"  Count="5" />
<Badge Text="Messages" Size="md" Color="brand" Count="12" />
<Badge Text="Errors"   Size="lg" Color="error" Count="99" />

<Badge Size="sm" Color="gray" IconOnly="true">
    <LeadingIcon>
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M6 3v6m-3-3h6" stroke-linecap="round" />
        </svg>
    </LeadingIcon>
</Badge>

Badge Component

Sizes

Shapes

Color variants — filled

Color variants — outline

With dot

With close button

With arrow

With count

Icon only