@k2b/ui

Description list

Semantic responsive key-value details with optional actions.

Responsive gridScan a small set of peer facts across one to three columns.

Owner: Platform team
Region: Europe West
Created: 31 July 2026
Repository: cloud

Compact rowsAlign terms and values for inspector metadata and settings summaries.

Created: 31 July 2026, 14:32
Updated: 13 August 2026, 18:41
ID: Res7K2

TSX

{/* Scan-friendly facts */}

<DescriptionList columns={2} items={facts} />

{/* Compact metadata in a detail panel */}

<DescriptionList

layout="rows"

size="sm"

actionVisibility="progressive"

items={metadata}

/>

DescriptionList presents exact key-value information with native description-list semantics.

Use DescriptionList

Use it for metadata, summaries, and compact detail panels. In layout="rows", a value may contain one compact control such as a status or assignee picker when that control has its own accessible name. Use a normal form layout for broader editing, and do not use the component for arbitrary card layouts.

Import

import { Button, DescriptionList } from "@k2b/ui";

Layout

columns controls the wide-screen grid and collapses to one column on narrow screens. Set layout="rows" for a compact inspector-style label/value list. An item may provide one short action directly related to its value. Set actionVisibility="progressive" when repeated row actions should stay quiet: fine pointers reveal them on row hover or focus, while touch layouts keep them visible.

Accessibility

The component renders real dl, dt, and dd elements. Terms must be concise, descriptions must remain meaningful without visual position, and icon-only actions need labels. Progressive actions remain keyboard-focusable and become visible through focus-within; visibility must never be the only indication that an action exists.

Runtime

Description lists are server-renderable and need no client JavaScript unless an item action is interactive.

Example

<DescriptionList
  layout="rows"
  actionVisibility="progressive"
  items={[
    { term: "Owner", description: "Platform team" },
    { term: "Region", description: "Europe West" },
    { term: "Repository", description: "cloud", action: <Button size="xs">Open</Button> },
  ]}
/>