Badge

Badges can be used to highlight information such as status, category, and count.

<dui-badge variant="BadgeVariant.Default">
    <dui-icon name="plane"/>
    Flight Booked
</dui-badge>
<dui-badge variant="BadgeVariant.Secondary">Requires Visa</dui-badge>
<dui-badge variant="BadgeVariant.Destructive">
    <dui-icon name="flame"/>
    Overbooked
</dui-badge>

Usage

<dui-badge variant="...">...</dui-badge>

Examples

Variants

Use variants to communicate different types of information categories.

<dui-badge>Default</dui-badge>
<dui-badge variant="BadgeVariant.Secondary">Secondary</dui-badge>
<dui-badge variant="BadgeVariant.Destructive">Destructive</dui-badge>
<dui-badge variant="BadgeVariant.Outline">Outline</dui-badge>
<dui-badge variant="BadgeVariant.Ghost">Ghost</dui-badge>
<dui-badge variant="BadgeVariant.Link">Link</dui-badge>

Icon on the left

<dui-badge>
    <dui-icon name="badge-check"/>
    Default
</dui-badge>
<dui-badge variant="BadgeVariant.Secondary">
    <dui-icon name="badge-check"/>
    Secondary
</dui-badge>
<dui-badge variant="BadgeVariant.Destructive">
    <dui-icon name="badge-check"/>
    Destructive
</dui-badge>
<dui-badge variant="BadgeVariant.Outline">
    <dui-icon name="badge-check"/>
    Outline
</dui-badge>
<dui-badge variant="BadgeVariant.Ghost">
    <dui-icon name="badge-check"/>
    Ghost
</dui-badge>
<dui-badge variant="BadgeVariant.Link">
    <dui-icon name="badge-check"/>
    Link
</dui-badge>

Icon on the right

<dui-badge>
    Default
    <dui-icon name="arrow-right"/>
</dui-badge>
<dui-badge variant="BadgeVariant.Secondary">
    Secondary
    <dui-icon name="arrow-right"/>
</dui-badge>
<dui-badge variant="BadgeVariant.Destructive">
    Destructive
    <dui-icon name="arrow-right"/>
</dui-badge>
<dui-badge variant="BadgeVariant.Outline">
    Outline
    <dui-icon name="arrow-right"/>
</dui-badge>
<dui-badge variant="BadgeVariant.Ghost">
    Ghost
    <dui-icon name="arrow-right"/>
</dui-badge>
<dui-badge variant="BadgeVariant.Link">
    Link
    <dui-icon name="arrow-right"/>
</dui-badge>

With spinner

<dui-badge>
    <dui-spinner/>
    Default
</dui-badge>
<dui-badge variant="BadgeVariant.Secondary">
    <dui-spinner/>
    Secondary
</dui-badge>
<dui-badge variant="BadgeVariant.Destructive">
    <dui-spinner/>
    Destructive
</dui-badge>
<dui-badge variant="BadgeVariant.Outline">
    <dui-spinner/>
    Outline
</dui-badge>
<dui-badge variant="BadgeVariant.Ghost">
    <dui-spinner/>
    Ghost
</dui-badge>
<dui-badge variant="BadgeVariant.Link">
    <dui-spinner/>
    Link
</dui-badge>

as-child

DuneUI Pro Tag Helper

as-child is a DuneUI Pro Tag Helper and not currently available. DuneUI Pro is a paid package which will be released around March 2026.

<dui-badge as-child="true">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>
<dui-badge as-child="true" variant="BadgeVariant.Secondary">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>
<dui-badge as-child="true" variant="BadgeVariant.Destructive">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>
<dui-badge as-child="true" variant="BadgeVariant.Outline">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>
<dui-badge as-child="true" variant="BadgeVariant.Ghost">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>
<dui-badge as-child="true" variant="BadgeVariant.Link">
    <a href="#">
        Anchor
        <dui-icon name="arrow-up-right"/>
    </a>
</dui-badge>

Long Text

<dui-badge variant="BadgeVariant.Secondary">
    A badge with a lot of text to see how it wraps
</dui-badge>

Custom colors

<dui-badge class="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50">
    Blue
</dui-badge>
<dui-badge class="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50">
    Green
</dui-badge>
<dui-badge class="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50">
    Sky
</dui-badge>
<dui-badge class="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50">
    Purple
</dui-badge>
<dui-badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
    Blue
</dui-badge>
<dui-badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
    Green
</dui-badge>
<dui-badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
    Sky
</dui-badge>
<dui-badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
    Purple
</dui-badge>
<dui-badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
    Red
</dui-badge>

Badge

On this page