Display

Badge

Status in four tones and a percent change that turns green or red.

CSS only

Example

Delivered In transit Delivery failed In review Neutral New +14.8% -3.2%

<span class="u-badge u-badge--ok">Delivered</span>
<span class="u-badge u-badge--warn">In transit</span>
<span class="u-badge u-badge--err">Delivery failed</span>
<span class="u-badge u-badge--info">In review</span>
<span class="u-badge">Neutral</span>
<span class="u-badge u-badge--pill">New</span>
<span class="u-badge u-badge--delta">+14.8%</span>
<span class="u-badge u-badge--delta" data-dir="down">-3.2%</span>

Installation

Badge ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`u-badge`	Neutral base, 24px tall.
`u-badge--ok, --warn, --err, --info`	State tones, with a soft background and measured text.
`u-badge--pill`	Fully rounded corners.
`u-badge--delta`	Positive change. With `data-dir="down"`, it becomes a drop in red.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
text	content	Color is never the only cue: write the status or the sign.