Data list | Quartz design system

Examples

A run, plain

A key, with a copy button and an empty field

Stacked in a side panel

Span attributes, small

When to use it

Use: A detail view of one run, key, prompt release or customer lists its facts.
Use: A side panel or a trace span shows attributes the person reads, not edits.
Not for: Many things share the same columns and the person compares them. Use Table.
Not for: The person edits the values. Use Field.
Not for: The pairs are headline numbers with trends. Use Stat.

7 rules

Must: Build the pairs with DataListItem, DataListLabel and DataListValue; never a grid of divs. Because the parts render a dl with dt and dd, so a screen reader announces the term and its definition as a pair.
Must: Pass null, undefined or an empty string for a missing value; never write "N/A", a dash or a blank. Because DataListValue shows the one empty word in text-3 itself, so every missing field reads the same and none looks like a bug.
Should: Keep a label to one or two words in sentence case, without a trailing colon. Because the label column is as wide as the longest label up to 160px, so one long label squeezes every value.
Should: Set identifiers, hashes and paths with mono, and counts and times with numeric. Because mono marks what a person copies, and tabular figures keep a column of numbers on one edge.
Should: Use variant="framed" only for a list that stands on its own; inside a Card or Panel keep plain. Because a frame inside a frame stacks two lines, and the card already holds the list.
Must: Pass className for placement on the list; every other prop lands on the dl. Because className goes on the frame that measures the width, so a width class there sets the width the list wraps at.
Never: Put buttons or links in a label; put the action in the value. Because a dt names the field, and a control in it is announced as part of the term.

4 checks

: It renders a dl with each pair in a div, and a dt and dd inside, which HTML allows and screen readers read as term and definition.
: The empty word is real text, not a placeholder attribute, so it is announced.
: Nothing in it is focusable; links and buttons in a value keep their own focus ring.
: Label and value use text-3 and text-1, both 4.5:1 or better on paper.

8 edge cases

Under 448px wide: Each label stacks above its value, so it works in a 320px panel and a page alike.
Long label: The label column stops at 160px and the label wraps anywhere.
Long value or ID: The value wraps anywhere and never widens the list.
Missing value: Shows the empty word in text-3; the row keeps its height.
Several values in one pair: They wrap in a row with an 8px gap.
Right to left: The label column and the text mirror.
Zoom 200%: Rows grow with the text and the list stacks sooner as the container narrows.
Inside a Panel body: Use plain; the panel body is already the white field.

7 props

11 tokens