Skip to main content

Badges

Status indicators and labels for categorisation.

Badge variants

Default Success Warning Danger
<span class="l-ui-badge l-ui-badge--default">Default</span>
<span class="l-ui-badge l-ui-badge--success">Success</span>
<span class="l-ui-badge l-ui-badge--warning">Warning</span>
<span class="l-ui-badge l-ui-badge--danger">Danger</span>

Rounded badges

Default Success Warning Danger
<span class="l-ui-badge l-ui-badge--default l-ui-badge--rounded">Rounded</span>

CSS classes

Badge CSS classes
Class Description
l-ui-badge Base badge block; required alongside any modifier
l-ui-badge--default Neutral gray badge
l-ui-badge--success Green success badge
l-ui-badge--warning Yellow warning badge
l-ui-badge--danger Red danger badge
l-ui-badge--rounded Modifier for pill-shaped badges