Skip to main content

Key Value Row

Single label/value row with hairline separator.

Inline (default)

StatusActive
PlanPro
Updated2m ago

Label with icon

API keysk_live_••••8f2a
Regioneu-west-1

Value with icon

HealthLiveHealthy
TierProActive
DocsOpen

Icon-only value

Copy token
About
External

Label + icon-only value

Secret key

Stacked layout

ProjectMorning pages
OwnerAda Lovelace

Settings panel

Themeatelier
Modelight
Localeen-US

Compact metrics

CPU12%
Memory4.2 GB
Disk61%

Truncated long value

API endpointhttps://api.example.com/v2/workspaces/acme/entries/export

Billing summary

This invoice

Subtotal€210.00
Tax€39.00
Total€249.00

vs DescriptionList

Both support termIcon / labelIcon and icon-only actions on the value side.

KeyValueRow

API key

DescriptionList

API key

API

PropRequiredTypeDefaultDescription
labelRequiredReactNodeRow label (start).
valueRequiredReactNodeRow value (end).
labelIcon / valueIconOptionalReactNodeIcons beside label or value text.
iconOnlyValueOptionalbooleanValue slot is icon-only (e.g. IconButton).
layoutOptionalinline | stackedinlineSpread row vs label above value.
compactOptionalbooleanTighter vertical padding.
borderlessOptionalbooleanOmit bottom hairline.
truncateValueOptionalbooleanEllipsis on long inline values.
valueAlignOptionalstart | endValue text alignment (inline layout).
tabularOptionalbooleanTabular numerals on value.