Badges — Labelled tag groups

An item ID and title lead three labelled metadata groups for priority, labels and owners. Use for compact item classification.

ReactHTML

1440 × 480

Open in new tab

Component.tsx32 lines

export default function BadgesTagGroups() {
  return (
    <div className="w-72 text-neutral-900 sm:w-80">
      <p className="font-mono text-xs text-neutral-500">ITEM-1042</p>
      <h2 className="mt-1 text-sm font-semibold">Item title</h2>
      <div className="mt-4 grid gap-4">
        <div>
          <h3 className="mb-1.5 text-xs font-medium text-neutral-500">Priority</h3>
          <ul role="list" className="flex flex-wrap gap-1.5">
            <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" />High</span></li>
          </ul>
        </div>
        <div>
          <h3 className="mb-1.5 text-xs font-medium text-neutral-500">Labels</h3>
          <ul role="list" className="flex flex-wrap gap-1.5">
            {['Category', 'Type', 'Stage'].map((label) => (
              <li key={label}><span className="inline-flex items-center rounded-md border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">{label}</span></li>
            ))}
            <li><span aria-label="Two more labels" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">+2</span></li>
          </ul>
        </div>
        <div>
          <h3 className="mb-1.5 text-xs font-medium text-neutral-500">Owners</h3>
          <ul role="list" className="flex flex-wrap gap-1.5">
            <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="flex size-5 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">AR</span>Alex Rivera</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="flex size-5 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">JL</span>Jordan Lee</span></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for one item with several classes of metadata. Pick badges-status-list to compare statuses of several items. Variations: replace Priority with Severity, add a due-date group, or use one owner and more labels.
Hierarchy: Read the ID and title, then Priority, Labels and Owners. High has a dot and an explicit priority word. Three role-named labels precede a +2 overflow badge with an accessible Two more labels name. Owner initials are decorative next to full names. Title up to 4 words, labels up to 2, names up to 3.
Responsive: At 640px only the width grows from 288px to 320px. Tags and owners wrap with 6px gaps; labels may form a second row for longer content. Groups remain a single column.
Layout: A 288px (w-72) stack grows to 320px (sm:w-80) at 640px. A 12px mono ID sits above a 14px semibold title. Three groups follow with 16px gaps. Each 12px medium group heading sits 6px above a role=list wrapping row with 6px gaps. Labels use 6px radii; overflow and priority use full radii. Owner chips combine 20px neutral-200 initials circles and 12px names with 6px gaps.
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

┌──────────────────────────────────┐
│ ITEM-1042                        │
│ Item title                       │
│ Priority                         │
│ (Dot High)                       │
│ Labels                           │
│ [Category] [Type] [Stage] (+2)   │
│ Owners                           │
│ (AR Alex Rivera) (JL Jordan Lee) │
└──────────────────────────────────┘

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 — Labelled tag groups

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators