Badges — Joined label and value tokens

Four joined metadata tokens divide a muted field label from its current value. Use for a small attribute summary where each value needs its own label.

ReactHTML

1440 × 480

Open in new tab

Component.tsx13 lines

export default function BadgesLabelValueTokens() {
  return (
    <div className="w-72 text-neutral-900 sm:w-[26rem]"><h2 className="text-sm font-semibold">Item attributes</h2>
    <div className="mt-3 grid grid-cols-2 gap-2"><div className="inline-flex min-w-0 items-center overflow-hidden rounded-full border border-neutral-300 text-xs"><span className="border-r border-neutral-300 bg-neutral-50 px-2.5 py-1 text-neutral-600">Priority</span>
    <span className="min-w-0 flex-1 px-2.5 py-1 text-center font-medium text-neutral-900">High</span></div>
    <div className="inline-flex min-w-0 items-center overflow-hidden rounded-full border border-neutral-300 text-xs"><span className="border-r border-neutral-300 bg-neutral-50 px-2.5 py-1 text-neutral-600">Status</span>
    <span className="min-w-0 flex-1 px-2.5 py-1 text-center font-medium text-neutral-900">Draft</span></div>
    <div className="inline-flex min-w-0 items-center overflow-hidden rounded-full border border-neutral-300 text-xs"><span className="border-r border-neutral-300 bg-neutral-50 px-2.5 py-1 text-neutral-600">Owner</span>
    <span className="min-w-0 flex-1 px-2.5 py-1 text-center font-medium text-neutral-900">Alex</span></div>
    <div className="inline-flex min-w-0 items-center overflow-hidden rounded-full border border-neutral-300 text-xs"><span className="border-r border-neutral-300 bg-neutral-50 px-2.5 py-1 text-neutral-600">Version</span>
    <span className="min-w-0 flex-1 px-2.5 py-1 text-center font-medium text-neutral-900">2.4</span></div></div></div>
  )
}

Pattern notes

When to use: Use when several compact values need explicit labels. Choose removable filter chips for editable selections. Variations: replace Owner with Team, add a numeric revision, or display two tokens in one row.
Hierarchy: Read the heading, then each field label and its value in row order. Labels use one word and values at most 7 characters. The divider belongs to the visual grouping; each token remains one continuous text pair.
Responsive: The root grows from 288px to 416px at 640px. Tokens stay in two columns and keep their shared pill anatomy; values remain short enough to fit the mobile segments.
Layout: A 288px root grows to 416px at sm. A 14px heading precedes a two-column token grid by 12px, with 8px gaps. Each rounded-full token has a 1px border, a neutral-50 label segment, a vertical divider and a flexible centered value segment. Both segments use 10px horizontal and 4px vertical padding.
States: These tokens are static metadata with no hover or focus states. Labels and values distinguish every attribute without color. They have no selected or disabled control behavior.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Item attributes                                      │
│ [Priority | High]            [Status | Draft]        │
│ [Owner    | Alex]            [Version | 2.4]         │
└──────────────────────────────────────────────────────┘

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 — Joined label and value tokens

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators