Fylgja Badge

A badge is a small pill for a label, status, or count, such as “New”, “Beta”, or an unread count. It is a plain <span class="badge">, styled through --badge-* variables, so you recolor and resize it without new classes.

Preview

New Beta 8
<span class="badge">New</span>
<span class="badge">Beta</span>
<span class="badge">8</span>

Colors

Set --badge-bg and --badge-color to recolor a badge. They default to the brand colors and take any value, including Fylgja’s --color-* token scale.

Default Neutral Active Error
<span class="badge">Default</span>
<span class="badge" style="--badge-bg: color-mix(in oklab, var(--root-bg) 55%, var(--root-fg)); --badge-color: var(--root-bg)">Neutral</span>
<span class="badge" style="--hue: var(--hue-green); --badge-bg: var(--color-8); --badge-color: var(--color-0)">Active</span>
<span class="badge" style="--hue: var(--hue-red); --badge-bg: var(--color-8); --badge-color: var(--color-0)">Error</span>

Notification badge

Pin a badge to the corner of another element by wrapping both in a relative container and giving the badge absolute with an inset. Keep the count out of the icon button’s contents and state it in the button’s aria-label instead.

<span class="relative inline-block">
	<button type="button" aria-label="Notifications, 3 unread">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
	</button>
	<span class="badge absolute" style="--inset-t: -0.5ch; --inset-e: -0.5ch; --badge-px: 0.5ch" aria-hidden="true">3</span>
</span>

Accessibility

  • A badge is decorative text, so make sure its meaning also reaches assistive tech through the surrounding content (here the button’s aria-label states the count).
  • Do not rely on color alone to convey status; keep the label text meaningful.

FAQ

How do I change a badge's color?

Set --badge-bg and --badge-color. They default to the brand colors and accept any color, including Fylgja's --color-* token scale.

Can a badge hold a number?

Yes. The badge uses tabular figures and a minimum width, so single and double-digit counts stay a consistent size.