List
List presents rows of related items, each with a leading visual, text, and an action.
Preview
One row of a scrollable list. The trailing is the promise: a chevron drills in, a toggle flips something now, a radio picks one of several, a value label only reports. Choose it before the label.
The width is fixed at 340 and the height hugs. 44 of content plus 16 of padding top and bottom is the 76; the 44 is 24 over 20 with no gap between the two lines. Keep the target at 44pt on iOS and 48dp on Android; this row clears both.
Trailing
Four affordances on one axis. Two are 20 glyphs, two are 44 targets. The row stays 76 tall either way, the content column already measures 44.
Chevron and Text sit on grey, Toggle and Radio on brand/base. Both controls ship switched on in all twelve variants, so the file has no off state: drive them from your own data, not from this row. Text reports a value chosen somewhere else and never takes a tap.
State
Three states across all four trailings, twelve variants in all. Only the fill and the ink move. Nothing resizes or shifts.
Pressed is the only state that touches the row's fill and leaves the toggle alone: a press on the row is not a press on the control. Disabled goes back to bg/white-0 and moves all ink to the disabled token, but the leading tile keeps its faded fill, so the row still reads as a row.
Swipe actions
A private set behind the row. The row does not resize, it slides by 76 per action and the square tiles wait underneath. One to three per side; past three the tiles are too narrow to hit.
Trailing puts the destructive one furthest from the thumb: Archive, Flag, Delete. Leading carries the positive ones, Pin, Read, Archive. Every action must also exist somewhere the user can find it; a swipe teaches nobody it is there. Archive sits on bg/surface-800, which inverts in dark to #D1D1D6 while its label stays on static white.
Properties
Two axes and five properties, twelve variants.
The swipe set has its own axes, Side and Actions, six variants. Description off leaves one 24 line in the column; Leading Icon off hands its 40 and the 12 gap back. The row hugs, so the trailing sets the floor.
Tokens
Every value the row reads, resolved to its primitive.
Disabled drops both controls to bg/soft-100, #E9E9EA and #48484A. Tile labels take text/on-color/strong, tile glyphs icon/on-color, both static white either mode. Two greys do one job and part company in dark: the leading glyph is state/faded/base-500, aliasing colors/gray/500 twice, while the chevron on text/soft-500 lifts to #AEAEB2. Both bind dimensions/icon/stroke 2, yet the chevron renders 2.5. Geometry: radius/2xl 24, radius/lg 12, spacing/4 16, spacing/3 12.
Guidelines
Match the trailing to what the tap does. A chevron promises a screen, so the supporting line can summarise it.
Do not put a toggle on a row that also opens a screen. Two targets, and the bigger one wins the thumb.
Keep the label to one line. The content column is 224 with the leading icon on, about thirty characters at 16 Semi Bold, and a row that wraps is no longer 76.