Badge

A small label for a status, a count or a category, built on the pill.

Variants

Six variants. primary, the solid fill, is the default; secondary is the neutral pill.

PrimarySecondaryDangerOutlineGhostLink Default

Code

<Badge>Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

Usage

import { Badge } from "@elements/ui/badge";

<Badge>Draft</Badge>
<Badge variant="success" dot>Active</Badge>
<Badge variant="primary" icon="inline-start"><Icon name="check" /> Verified</Badge>
<Badge href="/changelog" variant="outline" icon="inline-end">What's new <Icon name="arrow-right" /></Badge>

Examples

Status

The pill's status intents, with an optional dot.

ActivePendingFailedQueuedPro

Code

<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" dot>Pending</Badge>
<Badge variant="danger" dot>Failed</Badge>
<Badge variant="info" dot>Queued</Badge>
<Badge variant="accent">Pro</Badge>

With an icon

Before or after the label; icons take the small icon size, and icon names the side that gets the tighter padding.

Verified Bookmark Next

Code

<Badge variant="primary" icon="inline-start"><Icon name="check" /> Verified</Badge>
<Badge variant="outline" icon="inline-start"><Icon name="star" /> Bookmark</Badge>
<Badge icon="inline-end">Next <Icon name="arrow-right" /></Badge>

With a spinner

A decorative spinner for work in progress.

Deleting Generating

Code

<Badge variant="danger" icon="inline-start"><Spinner size="sm" label="" /> Deleting</Badge>
<Badge icon="inline-end">Generating <Spinner size="sm" label="" /></Badge>

Link

href renders a link with a focus ring.

Open link Read more

Code

<Badge href="/ui/button" variant="outline" icon="inline-end">Open link <Icon name="external-link" /></Badge>
<Badge href="/ui/button" variant="link">Read more</Badge>

Counts

A number-only badge gets its name through attrs.

8 99+ 20+

Code

<Badge variant="primary" attrs={{ "aria-label": "8 unread" }}>8</Badge>
<Badge variant="danger" attrs={{ "aria-label": "99+ alerts" }}>99+</Badge>
<Badge variant="outline">20+</Badge>

Invalid

aria-invalid draws a danger border, and a danger ring on focus, for a badge naming a value that fails validation.

Expired Fix the domain

Code

<Badge variant="outline" attrs={{ "aria-invalid": "true" }}>Expired</Badge>

Custom colors

A class on the badge, reading theme tokens.

Sky Violet Ink

Code

<Badge class="sky">Sky</Badge>
<Badge class="violet">Violet</Badge>
<Badge class="ink">Ink</Badge>

/* page CSS */
.badge.pill.sky { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }

Never wraps

A badge in a narrow column stays one line high.

Needs review Two words

RTL

Badges mirror in a right-to-left region: icons and dots stay at the inline start.

نشط موثق التالي

Code

<div dir="rtl">
  <Badge variant="success" dot>نشط</Badge>
  <Badge variant="primary" icon="inline-start"><Icon name="check" /> موثق</Badge>
  <Badge>التالي <Icon name="arrow-left" /></Badge>
</div>

Reference Badge in the manual Every part, attribute, slot, key and data attribute.