Badge

Preview Code

375 768 Full

Open

html

<span class="aparte-badge aparte-badge--success aparte-badge--solid">Live</span>
<span class="aparte-badge aparte-badge--warning">Draft</span>
<span class="aparte-badge aparte-badge--danger aparte-badge--outline">Failed</span>
<span class="aparte-badge aparte-badge--info aparte-badge--sm">12</span>
<!-- A dot has no text: role="img" lets its label be read. -->
<span class="aparte-badge aparte-badge--danger aparte-badge--dot" role="img" aria-label="Unread"></span>

.aparte-badge is a status or a count in a pill. It has the button’s two axes: an intent says what it means, a fill (--solid, --soft, --outline) how loudly. --sm and --lg size it, and --dot is the third form: no label, a coloured dot, always solid.

Customize

Variable	Default
--aparte-badge-font-size	var(--aparte-font-size-2xs)
--aparte-badge-gap	var(--aparte-space-1)
--aparte-badge-padding	var(--aparte-space-1) var(--aparte-space-2)
--aparte-badge-radius	var(--aparte-radius-full)
--aparte-badge-min-width	var(--aparte-space-8)
--aparte-badge-dot-size	var(--aparte-space-4)
--aparte-badge-intent	—
--aparte-badge-intent-ink	—
--aparte-badge-on-intent	—

Classes

.aparte-badge · .aparte-badge--danger · .aparte-badge--dot · .aparte-badge--info · .aparte-badge--lg · .aparte-badge--neutral · .aparte-badge--outline · .aparte-badge--primary · .aparte-badge--secondary · .aparte-badge--sm · .aparte-badge--soft · .aparte-badge--solid · .aparte-badge--success · .aparte-badge--warning

Accessibility

• A badge is text, read where it sits. A --dot has no text: give it role="img" and an aria-label, or a visually hidden word, since its colour alone says nothing to someone who cannot see it. An aria-label alone on a <span> is not read: a span has no role to name.

Related

• Tag — a chip that can be removed.
• Button — the intents and fills a badge shares.