Badges — Access badges in a comparison table

A small comparison table uses status pills across two access columns for three named groups. Use when readers need to compare permissions at a glance.

ReactHTML

1440 × 480

Open in new tab

Component.tsx17 lines

export default function BadgesAccessMatrix() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-[28rem]"><table className="w-full"><caption className="mb-3 text-left text-sm font-semibold">Access summary</caption>
    <thead><tr><th className="pb-2 pr-2 text-left text-xs font-medium text-neutral-500" scope="col">Group</th>
    <th className="px-1 pb-2 text-center text-xs font-medium text-neutral-500" scope="col">View</th>
    <th className="pl-1 pb-2 text-center text-xs font-medium text-neutral-500" scope="col">Edit</th></tr></thead>
    <tbody><tr className="border-t border-neutral-200"><th className="py-3 pr-2 text-left text-xs font-medium text-neutral-900" scope="row">Group name</th>
    <td className="px-1 py-3 text-center"><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 ">Enabled</span></td>
    <td className="pl-1 py-3 text-center"><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 ">Read only</span></td></tr>
    <tr className="border-t border-neutral-200"><th className="py-3 pr-2 text-left text-xs font-medium text-neutral-900" scope="row">Another group</th>
    <td className="px-1 py-3 text-center"><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 ">Enabled</span></td>
    <td className="pl-1 py-3 text-center"><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 ">Enabled</span></td></tr>
    <tr className="border-t border-neutral-200"><th className="py-3 pr-2 text-left text-xs font-medium text-neutral-900" scope="row">Final group</th>
    <td className="px-1 py-3 text-center"><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 ">Unavailable</span></td>
    <td className="pl-1 py-3 text-center"><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 ">Enabled</span></td></tr></tbody></table></div>
  )
}

Pattern notes

When to use: Use to compare a few groups across a small number of capabilities. Choose a status list for one status per item. Variations: replace permissions with readiness labels, show two groups, or add short counts to the group names.
Hierarchy: Read the table caption, column labels, then each group with its View and Edit statuses. Row and column headers retain native table relationships. Group names use at most 2 words; badge statuses use at most 2 words.
Responsive: The root grows from 288px to 448px at 640px. The three columns stay together; short group names and status labels may wrap naturally without widening the table.
Layout: A 288px bordered card grows to 448px at sm with 16px padding. Its full-width native table has a left-aligned caption and 12px column headings. Three rows use top dividers and 12px vertical padding; access cells center small outlined pills.
States: The table contains static status badges, without focusable controls or hover states. Every state has a visible word, including Unavailable and Read only, so status does not depend on color.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Access summary                                       │
│ ┌────────────────┬───────────────┬───────────────┐   │
│ │ Group          │ View          │ Edit          │   │
│ ├────────────────┼───────────────┼───────────────┤   │
│ │ Group name     │ [Enabled]     │ [Read only]   │   │
│ ├────────────────┼───────────────┼───────────────┤   │
│ │ Another group  │ [Enabled]     │ [Enabled]     │   │
│ ├────────────────┼───────────────┼───────────────┤   │
│ │ Final group    │ [Unavailable] │ [Enabled]     │   │
│ └────────────────┴───────────────┴───────────────┘   │
└──────────────────────────────────────────────────────┘

View all

Badges — Capability badges in a small grid
Layout tags: grid,icons,compact
Badges — Counts and dot indicators
Layout tags: layered,numbers,icons,compact
Badges — Document header with provenance
Layout tags: split,stacked,compact

Badges — Access badges in a comparison table

Pattern notes

More in Badges

Badges — Capability badges in a small grid

Badges — Counts and dot indicators

Badges — Document header with provenance