HTMX UI
Esc

    Type to search pages and sections.
    You're viewing the docs for v0.1.
    The latest version is next. Go to this page in next.

    Components

    Badge

    A small label for status, counts or categories.

    View .md
    New
    html 
    <span class="badge badge-primary">New</span>

    Variants#

    Primary Secondary Outline
    html 
    <span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-outline">Outline</span>

    Status#

    Soft, tinted variants for status. They use the --info, --success, --warning and --danger tokens.

    Info Success Warning Danger
    html 
    <span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

    With a dot or icon#

    Operational Degraded Verified
    html 
    <span class="badge badge-success badge-dot">Operational</span>
<span class="badge badge-warning badge-dot">Degraded</span>
<span class="badge badge-outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Verified</span>

    In context#

    Billing Beta

    html 
    <button class="btn btn-outline">Inbox <span class="badge badge-primary">12</span></button>
<h3 class="h4 flex items-center gap-2">Billing <span class="badge badge-secondary">Beta</span></h3>

    Reference#

    ClassDescription
    .badgeBase class.
    .badge-primary / -secondary / -outlineNeutral and brand styles.
    .badge-info / -success / -warning / -dangerSoft status colours.
    .badge-dotAdds a leading dot in the badge's text colour.