Content

ListRow

One row in a Spectrum-style list: a leading icon tile or avatar, a title in Figtree, a metadata line, and trailing content with a chevron when the row opens something.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`title`Required	`React.ReactNode`
`description`	`React.ReactNode`
`icon`	`IconName`
`tone`	`'negative' \| 'notice' \| 'positive' \| 'accent'`
`avatar`	`AvatarProps`
`image`	`string`	A picture as the lead (a product's cover), shown whole on the product backdrop.
`href`	`string`
`onClick`	`() => void`
`chevron`	`boolean`
`stack`	`boolean`	Trailing content moves to its own line under the title when it doesn't fit (always on phones), so several badges never squeeze the title.
`className`	`string`
`children`	`React.ReactNode`

Guidelines

One row in a Spectrum-style list: a leading icon tile or avatar, a title in Figtree, a metadata line, and trailing content with a chevron when the row opens something.

Provide: title, description, icon with tone (negative, notice, positive, accent) or avatar props, href or onClick, and trailing content (a Badge, a quiet ActionButton) as children. Group rows in ListView (divided by default).

Keep the description to one line of facts joined by middle dots.
Rows that open something get the chevron automatically; set chevron={false} when the trailing content is the action.
With more than one trailing badge, set stack: the badges move under the title when they don't fit (always on phones), indented to line up with the text, with the chevron at the far right.
image: a product's cover as the row's lead, 40px, shown whole on the product backdrop. Falls back to icon when there is no picture.