Badges Reference ↓

Solid

Default Primary Secondary Success Warning Danger Info Brand Accent

Soft

Default Primary Secondary Success Warning Danger Info Brand Accent

Outline

Default Primary Secondary Success Warning Danger Info Brand Accent

Ghost

Default Primary Secondary Success Warning Danger Info Brand Accent

With dot indicators & icons

Online Offline Away i Info * Featured ! Urgent + Verified Lock Locked NEW New

Sizes & pill

@xs @s m @l @xl @2xl pill

Tag cloud

Design systems CSS architecture Design tokens Accessibility Component library Open source Vanilla JS Breaking change v1.0.0

Notification counts on buttons

Reference

Base

ClassValues
.ui-badgebase class (required)
.ui-pillfull border-radius — combine with any badge

Modifiers

ClassValues
.ui-badge:*primary, secondary, success, warning, danger, info, brand, accent
.ui-badge-soft:*primary, secondary, success, warning, danger, info, brand, accent
.ui-badge-outline:*primary, secondary, success, warning, danger, info, brand, accent
.ui-badge-ghost:*primary, secondary, success, warning, danger, info, brand, accent
.ui-badge@*xs, s, m, l

Options

ClassValues