Badge

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<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>
<span class="aparte-badge aparte-badge--danger aparte-badge--dot" aria-label="Unread"></span>

Small count or status pill

Two axes like the button’s: an intent says what it means, a fill says how loudly. --dot is the third form — no label, so it is always painted solid.

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

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.