Data list | Glaze design system

Styles

When to use it

Use: The detail of one thing: a run, a key, a prompt release, a deploy.
Use: A few facts beside a form or under a card's title.
Not for: Many things of one kind, one per row. Use Item.
Not for: One number worth reading at a glance; write a label and the number in the type roles.

6 rules

Must: Use variant="plain" inside a Card or a Panel, and variant="panel" only on its own. Because panel draws the white surface, and a panel inside a card's panel is a box in a box.
Must: Put each DataListLabel and DataListValue in its own DataListItem. Because the item is the subgrid row and the rule; loose dt and dd pairs fall out of the label column and lose their split.
Never: Render a dash or leave a value blank by hand; pass null and the value reads None. Because a blank looks like a bug and a dash is read as "dash", while None says the field has no value.
Must: Set mono on a value that is an ID, a key, a hash or a path, and on nothing else. Because mono marks what can be copied into code; a name or a duration in mono reads a size bigger and as code.
Should: Show a value with an outcome as a Status inside the DataListValue, not as coloured text. Because Status carries the word and the mark, so the outcome reads in grayscale.
Should: Keep labels to one to three words, sentence case, no colon.

3 checks

6 edge cases

Long label: The column stops at 160px and the label wraps.
Long unbroken value: Breaks anywhere rather than overflowing.
Under 24rem: Each label stacks over its value.
Empty value: Reads None in text-2.
Value with a Status or Badge: Sits on the label's baseline in the value cell.
Dark theme: The panel and the rules flip with the tokens.

4 props

12 tokens