Badges — Status in list rows

Four divided item rows pair names and timestamps with distinct status glyphs and words. Use for a compact status summary.

ReactHTML

1440 × 480

Open in new tab

Component.tsx28 lines

export default function BadgesStatusList() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white text-neutral-900 sm:w-[26rem]">
      <div className="flex items-center justify-between gap-3 border-b border-neutral-200 px-4 py-3">
        <h2 className="text-sm font-semibold">Status overview</h2>
        <a href="#" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">View all</a>
      </div>
      <ul role="list">
        <li className="flex h-14 items-center justify-between gap-3 border-b border-neutral-200 px-4">
          <div className="min-w-0"><p className="truncate text-sm font-medium">Item name</p><p className="text-xs text-neutral-500">Updated 2 min ago</p></div>
          <span className="inline-flex shrink-0 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" />Live</span>
        </li>
        <li className="flex h-14 items-center justify-between gap-3 border-b border-neutral-200 px-4">
          <div className="min-w-0"><p className="truncate text-sm font-medium">Process name</p><p className="text-xs text-neutral-500">Updated 12 min ago</p></div>
          <span className="inline-flex shrink-0 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-2.5 overflow-hidden rounded-full border border-neutral-900"><span className="block h-full w-1/2 bg-neutral-900" /></span>In progress</span>
        </li>
        <li className="flex h-14 items-center justify-between gap-3 border-b border-neutral-200 px-4">
          <div className="min-w-0"><p className="truncate text-sm font-medium">Attempt name</p><p className="text-xs text-neutral-500">Updated 1 hour ago</p></div>
          <span className="inline-flex shrink-0 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="m6 6 12 12M18 6 6 18" /></svg>Failed</span>
        </li>
        <li className="flex h-14 items-center justify-between gap-3 px-4">
          <div className="min-w-0"><p className="truncate text-sm font-medium">Queue item</p><p className="text-xs text-neutral-500">Added 2 hours ago</p></div>
          <span className="inline-flex shrink-0 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" />Queued</span>
        </li>
      </ul>
    </div>
  )
}

Pattern notes

When to use: Use for short status summaries and activity panels. Pick badges-tag-groups for several metadata groups about one item. Variations: change timestamps to short descriptions, use three rows, or add an explicit paused status with a pause glyph.
Hierarchy: The 14px semibold Status overview title and View all link precede four rows. Names truncate while status badges keep their width. Live uses a filled dot, In progress a half-filled ring, Failed an X, Queued a hollow circle. Keep titles under 3 words, names under 5 and timestamps under 5.
Responsive: At 640px only the root width grows from 288px to 416px. Row heights remain 56px; min-w-0 and truncation keep names beside nonshrinking status badges.
Layout: A 288px (w-72) card expands to 416px (sm:w-[26rem]) at 640px. It has a 1px neutral-200 border, 8px radius and no outer padding. The header uses 16px horizontal and 12px vertical padding. Four 56px list rows use 16px horizontal padding, 12px gaps and neutral-200 dividers. Left names are 14px medium above 12px timestamps; right badges use standard 12px text, 6px dot indicators, a 10px half-filled ring and a 12px X icon.
States: Badges and rows are static. View all is underlined and changes to neutral-600 on hover; it has a 2px neutral-900 focus outline offset 2px. Status words and different glyphs remain meaningful in forced-colors mode.

Desktop wireframe

┌──────────────────────────────────────────────────┐
│ Status overview                   [View all]     │
├──────────────────────────────────────────────────┤
│ Item name                         (Dot Live)     │
│ Updated 2 min ago                                │
├──────────────────────────────────────────────────┤
│ Process name             (Half-ring In progress) │
│ Updated 12 min ago                               │
├──────────────────────────────────────────────────┤
│ Attempt name                   (X Failed)        │
│ Updated 1 hour ago                               │
├──────────────────────────────────────────────────┤
│ Queue item                    (Ring Queued)      │
│ Added 2 hours ago                                │
└──────────────────────────────────────────────────┘

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 — Status in list rows

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators