Small status labels using <span class="badge">.
Works with
Loading- Spinner for pending states
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/badge.css" />Default
Badge
Secondary
<span class="badge">Badge</span>
<span class="badge secondary">Secondary</span>Colors
One modifier class per @erikt/ui color seed: primary,
constructive, destructive, and
color1 through color6.
Primary
Constructive
Destructive
Color 1
Color 2
Color 3
Color 4
Color 5
Color 6
<span class="badge primary">Primary</span>
<span class="badge constructive">Constructive</span>
<span class="badge destructive">Destructive</span>
<span class="badge color1">Color 1</span>Outlined
Outlined
<span class="badge outlined">Outlined</span>With icon
Drop an <svg> inside and it sizes itself.
Verified
Failed
Info
<span class="badge constructive">
<svg><!-- icon --></svg>
Verified
</span>Sup
Make a badge of a <sup> and it automatically aligns
to the top.
Bob Admin
Alice User
<h1>Bob <sup class="badge">Admin</sup></h1>Loading
Add aria-busy to inject a spinner. Works on any
variant.
Syncing
Uploading
Processing
<span class="badge" aria-busy>Syncing</span>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Variant | .secondary |
Dark background with light text |
| Color | .primary.constructive.destructive.color1.color2.color3.color4.color5.color6 |
Tinted background and text |
| Outline | .outlined |
Transparent background with a border in the text color |
| Loading | [aria-busy] |
Shows a spinner |