Status badge

How to use it

Place next to an item's title to show its current state, such as a subscription, task, or feature-flag status. Keep the label to one or two words.

Accessibility

Uses role="status" so assistive tech announces the label's state without stealing keyboard focus. The success tone's white text on dark green (#065f46) is 7.7:1, well above 4.5:1; the warning and neutral tones the template also offers stay above it too.

Source (copy-ready)

Copy code

<span class="dcl-badge dcl-badge--success" role="status">Active</span>
<style>
.dcl-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.85rem; }
.dcl-badge--success { background-color: #065f46; color: #ffffff; }
</style>