Attribute
Pairs one field's label with its value on a detail page — reach for Table when the same fields repeat across many objects, and Field when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts InlineEdit when the field is editable in place, while AttributeActions hangs a per-value menu off it.
Usage
Examples
With description
AttributeLabelDescription adds a line that stays under the label, for a field
whose name does not explain itself.
With info
AttributeLabelInfo puts the same explanation behind a hover tooltip instead,
and reads correctly on either side of the label text.
With link
The label row takes inline content of its own, here a Link out to whatever
explains the field — the value slot stays reserved for the data.
Empty
Four ways a missing value can read: composed by hand, isEmpty on its own —
which swaps the value for an em dash and ignores whatever children it had — and
isEmpty alongside an AttributeEmptyDescription, which appears only in that
state and can carry the link out to the fix.
Loading
loading skeletons both slots and ignores the children, so a panel can be laid
out before its data lands; it wins over isEmpty.
Composition
The display components sanctioned inside a value — Badge, FormatDateTime,
OverflowList of Tags, Ip and IpList, Link, InlineCodeSnippet, Code —
each formatting the data itself rather than receiving a pre-built string.
With actions
AttributeActions turns the value into a DropdownMenu trigger: the row picks up
a hover surface and the menu carries the actions that belong to that one value.
Horizontal
orientation='horizontal' sets the label beside the value in a cell clamped
between 100 and 256px, so values line up down a panel.
Horizontal truncation
Horizontal cells clip with an ellipsis rather than wrapping — the label at its set width, 100px unless you widen it, and the value once its own content overruns.
Horizontal composition
The same value components in the horizontal layout, where a wide one such as
IpList type='horizontal' needs its row to span both columns.
Horizontal loading
The horizontal skeleton is a 16px line against the vertical 24px, matching the single-line row it stands in for.
Horizontal empty
The same four cases side by side, with width={160} on the label so the
descriptions have somewhere to sit.
Horizontal with actions
By default the value keeps its own interactivity: a link, or a snippet's copy button, still does its own job, and the menu opens from the space around it.
Horizontal with actions menu only
disableNestedInteractive renders the value inert, so a click anywhere on the row
opens the menu — for values with nothing worth clicking of their own.
With inline edit
Attribute > AttributeValue > InlineEdit is the sanctioned nesting for an
editable field — the value slot supplies the overflow room the editor needs, so
never add your own.
Horizontal with inline edit
The same editor in a horizontal row, where it takes the width of the value cell rather than the panel.
Mixed
A plain value, an actions target and an inline editor stacked in one column: the text has to start at the same place in all three, which is what the value slot's 7px pull is for — it moves the hover box left, not the text.
Horizontal mixed
The same three hosts horizontally, where the label cell fixes the start of every value and the pull has to fit inside the 12px gap between the two cells.