Badges — Grouped totals with state labels

Three divided counter columns pair totals with descriptive labels and state pills. Use to show a compact breakdown of one collection.

ReactHTML

1440 × 480

Open in new tab

Component.tsx13 lines

export default function BadgesGroupedCounters() {
  return (
    <ul className="grid w-72 grid-cols-3 rounded-lg border border-neutral-200 bg-white text-neutral-900 sm:w-[26rem]" role="list" aria-label="Collection totals"><li className="flex flex-col items-center border-r border-neutral-200 p-3 last:border-r-0"><span className="text-xl font-semibold tabular-nums text-neutral-900">48</span>
    <p className="mt-1 text-center text-xs text-neutral-500">All items</p>
    <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 mt-2">Total</span></li>
    <li className="flex flex-col items-center border-r border-neutral-200 p-3 last:border-r-0"><span className="text-xl font-semibold tabular-nums text-neutral-900">32</span>
    <p className="mt-1 text-center text-xs text-neutral-500">Ready items</p>
    <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 mt-2">Ready</span></li>
    <li className="flex flex-col items-center border-r border-neutral-200 p-3 last:border-r-0"><span className="text-xl font-semibold tabular-nums text-neutral-900">16</span>
    <p className="mt-1 text-center text-xs text-neutral-500">Pending items</p>
    <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 mt-2">Pending</span></li></ul>
  )
}

Pattern notes

When to use: Use for a simple numeric breakdown with named statuses. Choose a full stat card when a trend or explanation needs more space. Variations: replace counts with percentages, omit the total group, or use completed and remaining labels.
Hierarchy: Read total, ready and pending counts in row order. Numbers use tabular figures and at most 4 digits. Labels use at most 2 words; pills use one word. The outer list is named Collection totals.
Responsive: The root grows from 288px to 416px at 640px. The three equal columns remain side by side, with labels allowed to wrap to two lines on mobile.
Layout: A 288px bordered list grows to 416px at sm with three equal columns. Each column uses 12px padding and a right divider except the last. A 20px semibold total sits over a 12px label by 4px; a small pill follows by 8px.
States: All values are static informational content. Visible state labels identify each group without relying on fill. There are no focusable controls, hover, selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ 48                 32                 16             │
│ All items          Ready items        Pending items  │
│ [Total]            [Ready]            [Pending]      │
└──────────────────────────────────────────────────────┘

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 — Grouped totals with state labels

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators