Badges and status pills in CSS

Small labels that have to stay legible at every size and in both themes.

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--badge-ink, #1f2937);
  background: color-mix(in oklab, var(--badge-ink, #1f2937) 12%, white);
}

.badge.ok { --badge-ink: #15803d; }
.badge.warn { --badge-ink: #b45309; }
.badge.bad { --badge-ink: #b91c1c; }

How it works

1. inline-flex centers the text and lets an icon sit beside it.
2. A pill radius is any number larger than half the height.
3. color-mix derives the background from the text color, so both stay in step.

Keywords and builtins used here

• background
• bad
• badge
• color
• display
• em
• gap
• ok
• padding
• px
• rem
• var
• warn

The run, in numbers

Lines

16

Characters to type

386

Tokens

100

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 71 seconds.

Type this snippet

Step 2 of 4 in Surfaces, step 4 of 13 in Styling components.

← Previous Next →