List

Preview

One row of a scrollable list, where the trailing is the promise: a chevron opens a screen, a toggle flips something now, a radio picks one of several, a value only reports. Choose it before the label.

The width is fixed at 340 and the height hugs: 16 of padding, a 24 line over a 20 line, 16 of padding, so 76. The row clears the 44 pt target on iOS and the 48 dp one on Android.

Source: the List set of the Appetite UI Figma file, read on October 2, 2026.

How tall is a List row?

Default is a two line row with a tile, 76 high. Compact is a one line row at 48 high, for menus and settings where the supporting line would repeat the label.

Compact drops the 40 tile for a bare icon at 20 in a 24 box, pads 12 over 16 and carries the label only, with Description off in every Compact variant. The rows are 76 and 48 high at the same 340 width and the same radius 24, so the two sizes can sit in one list.

The Platform collection sets platform/list-row/min-height to 44 on iOS and 56 on Android. Compact at 48 clears the iOS minimum and sits under the Android one, so on Android use Default or pad the row in code.

The Toggle and Radio keep their size, so they overflow the 24 of content height evenly and the row stays 48.

Compact comes in all four trailings and all three states, half of the 24 variants of the set.

What can lead a List row?

The leading slot holds a tile with an icon, or an Avatar when the row is about a person. A bare icon replaces the tile at Compact.

Leading Avatar puts an Avatar where the tile sits, xl (40) at Default and base (24) at Compact; it ships off, so turn it on and turn Leading Icon off. A disabled row dims the avatar to 40 percent.

The icon sits in a 20 box at stroke 1.75 on state/faded/base-500, and the tile is state/faded/lighter-50 at radius 12.

Which trailings does List have?

List has four trailings on one axis: chevron, text, toggle and radio. The chevron is a 20 glyph, the text a 14/20 value, and the toggle and the radio sit in 44 targets, so the row stays 76 tall either way.

Chevron sits on text/soft-500, Text on text/sub-700, and Toggle and Radio on brand/base. The Toggle ships on and the Radio ships selected in every variant, so drive both from your own data.

Text reports a value chosen somewhere else and never takes a tap. The Radio disc is 22 with a 10 dot, and the chevron is stroke 1.75.

Which states does List have?

Three states across all four trailings: Pressed lays a gray Highlight inside the row and Disabled moves the ink. Nothing resizes or shifts.

Pressed lays a bg/weak-50 Highlight inside the row, inset 4 on every side, rounded like the row (a capsule on Compact) and under the content. The leading tile turns bg/white-0 so it stays visible on the gray, and a press never reaches the control, so the toggle keeps its paint.

Disabled moves all ink to text/disabled-400 and fg/disabled-400, dims an avatar to 40 percent and takes the Toggle track to 40 percent of brand/base.

There is no Hover state. The Highlight is an absolute layer named Highlight inside each Pressed variant.

How do swipe actions work?

A private set, _List Row - Swipe Actions: the row lifts onto bg/weak-50 and slides by the width of its actions, which wait beside it as round buttons with a label under each. One to three per side.

The actions are 48 circles with a 12/16 Semi Bold label below, 4 apart. Pin is brand/base, Read state/success/base-500, Flag state/away/base-500 and Delete state/error/base-500.

Trailing carries Archive, Flag and Delete, with the destructive one at the edge. Leading carries Pin and Read, and Archive as a third.

Every action must also exist somewhere a user can find it, because a swipe teaches nobody it is there.

Archive sits on bg/surface-800, which inverts in dark to #D1D1D6 while its glyph stays white.

The swipe set has its own axes, Side and Actions, 6 variants.

What is Price Row?

Price Row is a separate set for itemized totals: a label on the left and a value on the right, at two emphases.

Default sets both lines at 14/20, the label on text/sub-700 and the value on text/strong-950. Strong sets both at 16/24 Semi Bold on text/strong-950, for the total.

Price Row stands apart from the List rows: it has no tile, no trailing and no State, and it is 345 wide where List is 340.

Price Row holds 2 variants.

Properties

Three variant axes and seven instance properties on List. The swipe set and Price Row have their own.

Description off leaves one 24 line in the column. Leading Icon off hands back its 40 and the 12 gap.

List holds 24 variants, which is Size, Trailing and State crossed.

Tokens

Every value the row reads, resolved to its primitive.

Radius 24 is dimensions/radius/2xl and the tile 12 is dimensions/radius/lg, and the icons carry stroke 1.75. The bell is state/faded/base-500 and the chevron text/soft-500, two grays that part company in dark.

The chevron reads text/soft-500, 3.26 to 1 on white, and disabled ink is #AEAEB2 at 2.21 to 1, which WCAG exempts on a disabled row. In code each row is one focusable control with a visible focus ring, and the Toggle and Radio sit in 44 targets.

How does List differ on iOS and Material 3?

Both platforms have a list. iOS draws a full width table in three styles and Material 3 a 56 high item with up to three lines. Appetite UI List is a card shaped row on both.

Apple and Material set the row height by platform. In Appetite UI the Default row is 76 and Compact 48, both clear of platform/min-touch-target, 44 pt on iOS and 48 dp on Android, and Compact sits under the 56 Android row of platform/list-row/min-height.

Which trailing should I use?

Match the trailing to what the tap does: a chevron opens a screen, a toggle flips something now, a radio picks one of several, and a value only reports.

Keep the label to one line. The content column is 224 with the leading tile on, about thirty characters at 16 Semi Bold, and a row that wraps grows past 76.