Badge

Basic Usage

New

<c-ui.badge color="lime">New</c-ui.badge>

{% cotton ui.badge color="lime" %}New{% endcotton %}

Sizes

Badges come in sizes from size="xs" to size="2xl", defaulting to md.

Small Default Large

<c-ui.badge size="sm">Small</c-ui.badge>
<c-ui.badge>Default</c-ui.badge>
<c-ui.badge size="lg">Large</c-ui.badge>

{% cotton ui.badge size="sm" %}Small{% endcotton %}
{% cotton ui.badge %}Default{% endcotton %}
{% cotton ui.badge size="lg" %}Large{% endcotton %}

Colors

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

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

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

{% cotton ui.badge color="zinc" %}Zinc{% endcotton %}
{% cotton ui.badge color="red" %}Red{% endcotton %}
{% cotton ui.badge color="orange" %}Orange{% endcotton %}
{% cotton ui.badge color="amber" %}Amber{% endcotton %}
{% cotton ui.badge color="yellow" %}Yellow{% endcotton %}
{% cotton ui.badge color="lime" %}Lime{% endcotton %}
{% cotton ui.badge color="green" %}Green{% endcotton %}
{% cotton ui.badge color="emerald" %}Emerald{% endcotton %}
{% cotton ui.badge color="teal" %}Teal{% endcotton %}
{% cotton ui.badge color="cyan" %}Cyan{% endcotton %}
{% cotton ui.badge color="sky" %}Sky{% endcotton %}
{% cotton ui.badge color="blue" %}Blue{% endcotton %}
{% cotton ui.badge color="indigo" %}Indigo{% endcotton %}
{% cotton ui.badge color="violet" %}Violet{% endcotton %}
{% cotton ui.badge color="purple" %}Purple{% endcotton %}
{% cotton ui.badge color="fuchsia" %}Fuchsia{% endcotton %}
{% cotton ui.badge color="pink" %}Pink{% endcotton %}
{% cotton ui.badge color="rose" %}Rose{% endcotton %}

Pill Variant

Display badges with a fully rounded border radius using the variant="pill" prop.

Active Pending Inactive

<c-ui.badge variant="pill" color="green">Active</c-ui.badge>
<c-ui.badge variant="pill" color="amber">Pending</c-ui.badge>
<c-ui.badge variant="pill" color="red">Inactive</c-ui.badge>

{% cotton ui.badge variant="pill" color="green" %}Active{% endcotton %}
{% cotton ui.badge variant="pill" color="amber" %}Pending{% endcotton %}
{% cotton ui.badge variant="pill" color="red" %}Inactive{% endcotton %}

Solid Variant

Bold, high-contrast badges for more important status indicators or alerts.

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

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

{% cotton ui.badge variant="solid" color="zinc" %}Zinc{% endcotton %}
{% cotton ui.badge variant="solid" color="red" %}Red{% endcotton %}
{% cotton ui.badge variant="solid" color="orange" %}Orange{% endcotton %}
{% cotton ui.badge variant="solid" color="amber" %}Amber{% endcotton %}
{% cotton ui.badge variant="solid" color="yellow" %}Yellow{% endcotton %}
{% cotton ui.badge variant="solid" color="lime" %}Lime{% endcotton %}
{% cotton ui.badge variant="solid" color="green" %}Green{% endcotton %}
{% cotton ui.badge variant="solid" color="emerald" %}Emerald{% endcotton %}
{% cotton ui.badge variant="solid" color="teal" %}Teal{% endcotton %}
{% cotton ui.badge variant="solid" color="cyan" %}Cyan{% endcotton %}
{% cotton ui.badge variant="solid" color="sky" %}Sky{% endcotton %}
{% cotton ui.badge variant="solid" color="blue" %}Blue{% endcotton %}
{% cotton ui.badge variant="solid" color="indigo" %}Indigo{% endcotton %}
{% cotton ui.badge variant="solid" color="violet" %}Violet{% endcotton %}
{% cotton ui.badge variant="solid" color="purple" %}Purple{% endcotton %}
{% cotton ui.badge variant="solid" color="fuchsia" %}Fuchsia{% endcotton %}
{% cotton ui.badge variant="solid" color="pink" %}Pink{% endcotton %}
{% cotton ui.badge variant="solid" color="rose" %}Rose{% endcotton %}

Icons

Add icons to badges using the icon_leading and icon_trailing slots.

Users Complete Notifications

<c-ui.badge color="blue">
    <c-slot name="icon_leading">
        <svg>...</svg>
    </c-slot>
    Users
</c-ui.badge>

<c-ui.badge color="green">
    <c-slot name="icon_leading">
        <svg>...</svg>
    </c-slot>
    Complete
</c-ui.badge>

<c-ui.badge color="purple">
    Notifications
    <c-slot name="icon_trailing">
        <svg>...</svg>
    </c-slot>
</c-ui.badge>

{% cotton ui.badge color="blue" %}
    {% cotton:slot icon_leading %}
        <svg>...</svg>
    {% endcotton:slot %}
    Users
{% endcotton %}

{% cotton ui.badge color="green" %}
    {% cotton:slot icon_leading %}
        <svg>...</svg>
    {% endcotton:slot %}
    Complete
{% endcotton %}

{% cotton ui.badge color="purple" %}
    Notifications
    {% cotton:slot icon_trailing %}
        <svg>...</svg>
    {% endcotton:slot %}
{% endcotton %}

Clickable Badges

Make badges clickable by providing an href prop. The badge will render as a link with hover effects.

Features Categories

<c-ui.badge href="/features" color="blue" variant="pill">
    <c-slot name="icon_leading">
        <svg>...</svg>
    </c-slot>
    Features
</c-ui.badge>

<c-ui.badge href="/categories" color="purple" variant="pill">
    Categories
    <c-slot name="icon_trailing">
        <svg>...</svg>
    </c-slot>
</c-ui.badge>

{% cotton ui.badge href="/features" color="blue" variant="pill" %}
    {% cotton:slot icon_leading %}
        <svg>...</svg>
    {% endcotton:slot %}
    Features
{% endcotton %}

{% cotton ui.badge href="/categories" color="purple" variant="pill" %}
    Categories
    {% cotton:slot icon_trailing %}
        <svg>...</svg>
    {% endcotton:slot %}
{% endcotton %}

Inset Positioning

When using badges alongside inline text, use the inset prop to add negative margins for better alignment.

Page Builder New

Easily author new pages without leaving your browser.

<h3>
    Page Builder <c-ui.badge color="lime" inset="top bottom">New</c-ui.badge>
</h3>
<p>Easily author new pages without leaving your browser.</p>

<h3>
    Page Builder {% cotton ui.badge color="lime" inset="top bottom" %}New{% endcotton %}
</h3>
<p>Easily author new pages without leaving your browser.</p>

API Reference

Props

Name	Description	Type	Options	Default
`color`	Badge color to convey different meanings or categories.	str	`zincredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose`	zinc
`size`	Badge size from xs to 2xl.	str	`xssmmdlgxl2xl`	md
`variant`	Badge style variant. 'pill' for fully rounded, 'solid' for high-contrast colors.	str	`pillsolid`
`href`	Make the badge clickable by providing a URL. Renders as an anchor tag with hover effects.	str	—
`inset`	Add negative margins to specific sides for alignment. Options: 'top', 'bottom', 'left', 'right', or combinations like 'top bottom'.	str	—

Slots

Name	Description	Type	Options
`slot (default)`	The badge content (text or elements).	—	—
`icon_leading`	Optional icon to display before the badge text. Provide an SVG element.	slot	—
`icon_trailing`	Optional icon to display after the badge text. Provide an SVG element.	slot	—

Highlight information like status, category, or count.