Badge

Highlight information like status, category, or count.

Badge

<x-badge color="lime">Badge</x-badge>

Sizes

Choose between three different sizes for your badges with the


    size

prop.

Small

Default

Large

<x-badge size="sm">Small</x-badge>
<x-badge size="base">Default</x-badge>
<x-badge size="lg">Large</x-badge>

Icons

Add icons to badges with the


    icon

and


    icon-trailing

props.

Recomended to use micro icon variant with prefix


    c-...

for badges. More information visit icon component.

Users

Files

Videos

<x-badge icon="c-user-circle">Users</x-badge>
<x-badge icon="c-document-text">Files</x-badge>
<x-badge icon-trailing="c-video-camera">Videos</x-badge>

Variant

Display badges with a fully rounded border radius using the


    variant="pill"

prop.

Users

<x-badge variant="default" icon="c-user">Users</x-badge>
<x-badge variant="pill" icon="c-user">Users</x-badge>

As button

Make the entire badge clickable by wrapping it in a button element.

Amount

<x-badge as="badge" variant="pill" icon="c-plus" size="lg">Amount</x-badge>
<x-badge as="button" variant="pill" icon="c-plus" size="lg">Amount</x-badge>

Colors

Choose from an array of colors to differentiate between badges and convey emotion.

Zinc

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

<x-badge color="zinc">Zinc</x-badge>
<x-badge color="red">Red</x-badge>
<x-badge color="orange">Orange</x-badge>
<x-badge color="amber">Amber</x-badge>
<x-badge color="yellow">Yellow</x-badge>
<x-badge color="lime">Lime</x-badge>
<x-badge color="green">Green</x-badge>
<x-badge color="emerald">Emerald</x-badge>
<x-badge color="teal">Teal</x-badge>
<x-badge color="cyan">Cyan</x-badge>
<x-badge color="sky">Sky</x-badge>
<x-badge color="blue">Blue</x-badge>
<x-badge color="indigo">Indigo</x-badge>
<x-badge color="violet">Violet</x-badge>
<x-badge color="purple">Purple</x-badge>
<x-badge color="fuchsia">Fuchsia</x-badge>
<x-badge color="pink">Pink</x-badge>
<x-badge color="rose">Rose</x-badge>

Inset

If you're using badges alongside inline text, you might run into spacing issues because of the extra padding around the badge. Use the


    inset

prop to add negative margins to the top and bottom of the badge to avoid this.

Page builder

New

Easily author new pages without leaving your browser.

<x-heading>
    Page builder <x-badge color="lime" inset="top bottom">New</x-badge>
</x-heading>
 
<x-subheading>Easily author new pages without leaving your browser.</x-subheading>