Skip to content

List.Container

PropertyTypeDescription
separatedboolean(optional) When true, adds row gap between items so each row keeps its own outline and border radius instead of running edge-to-edge.
childrenReact.ReactNode(required) List items. Use List.Item.Basic, List.Item.Action, or List.Item.Accordion as direct children.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Item.Basic

PropertyTypeDescription
selectedboolean(optional) When true, applies the selected state styling (e.g. background).
pendingboolean(optional) If set to true, an overlaying skeleton with animation will be shown (loading state). Disables pointer events on the item.
skeletonboolean(optional) If set to true, applies skeleton font styling to the item (text placeholder animation). Use for loading state without the full overlay from pending.
iconIconIcon(optional) Optional icon (e.g. fish_medium or an icon element). Rendered at the start of the row.
titleReact.ReactNode(optional) Optional title. Rendered after the icon when provided.
childrenReact.ReactNode(required) Item content. Typically List.Cell.Start, List.Cell.Center, List.Cell.End, List.Cell.Title (use List.Cell.Title.Overline/List.Cell.Title.Subline for overline/subline text), or the drop-in List.Cell.Title.Overline/List.Cell.Title.Subline components, or List.Cell.Footer.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Item.Action

PropertyTypeDescription
titleReact.ReactNode(optional) Optional title for the action item.
iconIconIcon(optional) Optional icon for the action item (e.g. fish_medium).
hrefstring(optional) When set, renders as a native link (<a>) so the item navigates to the URL. Use for external or internal navigation. When not set, the item behaves as a button (use onClick for custom handling).
targetstring(optional) Link target (e.g. _blank for new tab). Only applicable when href is set.
relstring(optional) Link rel (e.g. noopener noreferrer for external links). Only applicable when href is set.
onClick(event) => void(optional) Called when the user clicks or activates the item (Enter/Space key). Receives the native mouse event.
chevronPosition'left'
'right'
(optional) Placement of the chevron icon. Defaults to right. Use left to show the chevron on the left side.
pendingboolean(optional) If set to true, an overlaying skeleton with animation will be shown (loading state). Disables click and keyboard while active.
skeletonboolean(optional) If set to true, applies skeleton font styling to the item (text placeholder).
childrenReact.ReactNode(optional) Additional cells (e.g. List.Cell.End for value). A chevron icon is rendered at the end automatically.
List.Item.BasicVarious(optional) Inherits List.Item.Basic properties (variant, selected, spacing, etc.).
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Item.Accordion

PropertyTypeDescription
iconIconIcon(optional) Optional icon for the accordion header (e.g. fish_medium).
titleReact.ReactNode(optional) Optional title for the accordion header.
chevronPosition'left'
'right'
(optional) Placement of the chevron icon. Defaults to right. Use left to show the chevron on the left side.
openboolean(optional) Initial open state. Defaults to false. The accordion can be toggled by the user via the header.
childrenReact.ReactNode(required) Header cells (e.g. List.Cell.Start, List.Cell.Title/List.Cell.Title.Overline, List.Cell.End) and optionally List.Item.Accordion.Content for the expandable section.
List.Item.BasicVarious(optional) Inherits List.Item.Basic properties (variant, pending, spacing, etc.).

List.Item.Accordion.Header

PropertyTypeDescription
childrenReact.ReactNode(optional) Header cells (e.g. List.Cell.Start, List.Cell.Title.Overline, List.Cell.End). The chevron, icon, and title from the parent accordion are rendered automatically.
List.Item.BasicVarious(optional) Inherits List.Item.Basic properties (variant, pending, spacing, etc.).
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Item.Accordion.Content

PropertyTypeDescription
childrenReact.ReactNode(required) Content displayed inside the expandable accordion body.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Title

PropertyTypeDescription
fontSize'small'
'basis'
(optional) Font size of the title content. Defaults to basis. Use small for smaller text.
childrenReact.ReactNode(required) Title content of the list item. Equivalent to using the title prop on List.Item.Basic or List.Item.Action. You can nest List.Cell.Title.Overline/List.Cell.Title.Subline inside the component for the overline/subline text.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Title.Overline

PropertyTypeDescription
fontSize'basis'
'small'
'x-small'
(optional) Font size of the overline content. Defaults to x-small.
fontWeight'regular'
'medium'
(optional) Font weight of the overline content. Defaults to medium.
childrenReact.ReactNode(required) Overline content of the list item, shown above the main title row. Use via List.Cell.Title.Overline when nesting inside the title block (or drop-in as List.Cell.Title.Overline). Pairs with List.Cell.Title.Subline inside the block.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Title.Subline

PropertyTypeDescription
variant'description'(optional) Visual variant. Use description for smaller, muted text style.
fontSize'basis'
'small'
'x-small'
(optional) Font size of the subline content. Defaults to small. When variant="description", defaults to x-small.
fontWeight'regular'
'medium'
(optional) Font weight of the subline content. Defaults to regular.
childrenReact.ReactNode(required) Subline content of the list item, shown below the title. Use via List.Cell.Title.Subline when nesting inside the title block (or as standalone List.Cell.Title.Subline). Pairs with List.Cell.Title.Overline or List.Cell.Title.Overline.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Start

PropertyTypeDescription
fontSize'small'
'basis'
(optional) Font size of the start content. Defaults to basis. Use small for smaller text.
childrenReact.ReactNode(required) Start content of the list item (e.g. icon, label).
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Center

PropertyTypeDescription
childrenReact.ReactNode(required) Center content of the list item. Grows to fill available space.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.End

PropertyTypeDescription
fontWeight'regular'
'medium'
(optional) Font weight of the end content. Defaults to medium.
fontSize'small'
'basis'
(optional) Font size of the end content. Defaults to basis. Use small for smaller text.
childrenReact.ReactNode(required) End content of the list item (e.g. value, action).
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

List.Cell.Footer

PropertyTypeDescription
childrenReact.ReactNode(required) Footer content of the list item. Grows to fill available space.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.