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

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