Badges — Styles, sizes and indicators

Three captioned rows compare badge treatments, indicators, and shape or size. Use as a neutral badge vocabulary with each variation named.

ReactHTML

1440 × 480

Open in new tab

Component.tsx33 lines

export default function BadgesVariantSet() {
  return (
    <div className="grid w-72 gap-5 text-neutral-900 sm:w-[26rem]">
      <div>
        <h2 className="mb-2 text-xs text-neutral-500">Styles</h2>
        <ul role="list" className="grid grid-cols-[max-content_max-content] gap-2 sm:flex sm:flex-wrap">
          <li><span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Outline</span></li>
          <li><span className="inline-flex items-center rounded-full border border-neutral-300 bg-neutral-900 px-2.5 py-0.5 text-xs font-medium text-white">Solid</span></li>
          <li><span className="inline-flex items-center rounded-full border border-neutral-300 bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">Subtle</span></li>
          <li><span className="inline-flex items-center rounded-full border border-dashed border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Dashed</span></li>
        </ul>
      </div>
      <div>
        <h2 className="mb-2 text-xs text-neutral-500">Indicators</h2>
        <ul role="list" className="grid grid-cols-[max-content_max-content] gap-2 sm:flex sm:flex-wrap">
          <li><span className="inline-flex items-center gap-1.5 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium"><span aria-hidden="true" className="size-1.5 rounded-full border border-neutral-900 bg-neutral-900" />Dot</span></li>
          <li><span className="inline-flex items-center gap-1.5 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium"><span aria-hidden="true" className="size-1.5 rounded-full border border-neutral-900" />Ring</span></li>
          <li><span className="inline-flex items-center gap-1.5 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3"><path d="m5 12 4 4L19 6" /></svg>Check</span></li>
          <li><span className="inline-flex items-center gap-1.5 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Count<span className="tabular-nums">12</span></span></li>
        </ul>
      </div>
      <div>
        <h2 className="mb-2 text-xs text-neutral-500">Shape and size</h2>
        <ul role="list" className="grid grid-cols-[max-content_max-content] items-center gap-2 sm:flex sm:flex-wrap">
          <li><span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Pill</span></li>
          <li><span className="inline-flex items-center rounded-md border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Square</span></li>
          <li><span className="inline-flex h-5 items-center rounded-full border border-neutral-300 px-2 text-xs font-medium">Small</span></li>
          <li><span className="inline-flex h-7 items-center rounded-full border border-neutral-300 px-3 text-sm font-medium">Large</span></li>
        </ul>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use to compare badge anatomy and create a design-system reference. Pick badges-status-list to place status beside real row content. Variations: use only the four styles, pair size examples with counts, or replace the check with another named status glyph.
Hierarchy: Read Styles, Indicators, then Shape and size. Every treatment has a visible word naming it. Solid uses neutral-900 with white text, subtle neutral-100 with neutral-700, dashed changes border style. Indicator badges name Dot, Ring, Check and Count; the number is 12px tabular. Keep badge labels to one or two short words.
Responsive: At 640px width increases from 288px to 416px. Below 640px every group has two columns sized to their badge contents. At 640px it becomes a wrapping flex row with 8px gaps. Type and indicator dimensions stay unchanged.
Layout: A 288px (w-72) root expands to 416px (sm:w-[26rem]) at 640px. Three groups have 20px gaps; 12px captions sit 8px above role=list grids with two content-sized columns with 8px gaps, becoming flex-wrap rows at 640px. The badge uses 10px horizontal and 2px vertical padding, a 1px neutral-300 border and 12px medium text. Indicators are 6px dots or a 12px check. Size examples are 20px and 28px tall; the shape examples compare full and 6px radii.
States: Static text and glyphs, with no hover, focus, open, selected or disabled behaviour. Meaning is carried by labels and shapes as well as neutral fill.

Desktop wireframe

┌─────────────────────────────────────┐
│ Styles                              │
│ (Outline) (Solid) (Subtle) (Dashed) │
│ Indicators                          │
│ (Dot) (Ring) (Check) (Count 12)     │
│ Shape and size                      │
│ (Pill) [Square] (Small) (Large)     │
└─────────────────────────────────────┘

View all

Badges — Access badges in a comparison table
Layout tags: table,compact
Badges — Capability badges in a small grid
Layout tags: grid,icons,compact
Badges — Counts and dot indicators
Layout tags: layered,numbers,icons,compact

Badges — Styles, sizes and indicators

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators