Item | Sodium design system

Sizes

analytics_whProd
Medium warehouse, suspends after 5 minutes idle.
412 credits
icon
run_8f2a91
Failed
run_8f2a92
Running
status

When to use it

Use: A list of things a person opens one at a time: tables, pipelines, workers, buckets.
Use: A short list in a panel, where a table's columns would be empty.
Not for: Rows compared column by column, sorted or selected in bulk; that is a table.
Not for: Label and value pairs about one thing. Use Data list.

6 rules

Must: Put Items in an ItemGroup; variant="plain" inside a frame that already has the edge. Because the group is the list role and the frame, and a framed group inside a frame draws a box in a box.
Never: Set an Item's name in capitals or a label role; ItemTitle keeps it as written. Because names are identifiers people compare and copy, and orders_daily in capitals is a different string.
Must: Make a row that opens something an ItemLink inside ItemTitle, not an onClick on the Item. Because the link covers the row with one tab stop and its ring inside the row, while a clickable div is not reachable by keyboard.
Never: Mark the chosen row with a bar down one edge or a bold name; pass selected. Because Sodium marks a place you are with the selection wash, and a side rail is the habit of generated UI.
Must: Keep ItemActions to ghost icon buttons or one secondary small Button; never a primary. Because a slab on every row is a slab per row, and the one primary belongs to the page.
Should: Lead with a StatusMark when every row has a state, and keep the word in ItemMeta or a Status.

5 states, highest first

4 checks

: ItemGroup is role="list" and each Item a listitem.
: An ItemLink row takes one tab stop; its 2px ring is drawn inside the row so the frame cannot clip it.
: Names are text-1 18.3:1, descriptions text-2 7.8:1, meta text-3 5.6:1; on the selection wash 16.5, 7.0 and 5.1:1.
: Set aria-current="page" on the selected row's link.

1 key

4 edge cases

6 props

16 tokens