Skip to content
Jewel

Badge

A small uppercase label on its own glass pill, for a status (Private, Publishing…, Failed) or a count (1 / 3). Most often it sits over a photo.

CSS
css/components/badge.css

01 — Variants

Tones

Default for neutral status, accent for good news and work in progress, error for failures, solid for something new.

Private Published Publishing… Failed New

Status

The traffic light tones, for the health of a system: success, warning, error and info. The dot takes the stronger mark color.

Healthy Degraded Down Syncing

Over a photo

Place a badge in a corner with data-place. Use a .badges group when one corner needs several. Badges ignore taps, so the photo underneath still works.

Publishing…
Private
Failed

02 — Usage

Use it for

  • Status that can change: Private, Draft, Publishing…, Failed.
  • Counts over a carousel or a stack of photos.

Avoid

  • Categories. Use a tag.
  • Long text. A badge is one or two words.
  • One-off pills built for a single page.

03 — Accessibility

Notes

  • A badge is plain text, read where it sits.
  • Hide a count with aria-hidden="true" when it repeats a label read elsewhere.
  • Wrap a status that changes while the page is open in role="status", so the change is announced.
  • Its own glass surface keeps it readable over any photo, light or dark.