List.Container
| Property | Type | Description |
|---|---|---|
separated | boolean | (optional) When true, adds row gap between items so each row keeps its own outline and border radius instead of running edge-to-edge. |
children | React.ReactNode | (required) List items. Use List.Item.Basic, List.Item.Action, or List.Item.Accordion as direct children. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Item.Basic
| Property | Type | Description |
|---|---|---|
selected | boolean | (optional) When true, applies the selected state styling (e.g. background). |
pending | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown (loading state). Disables pointer events on the item. |
skeleton | boolean | (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. |
icon | IconIcon | (optional) Optional icon (e.g. fish_medium or an icon element). Rendered at the start of the row. |
title | React.ReactNode | (optional) Optional title. Rendered after the icon when provided. |
children | React.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. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Item.Action
| Property | Type | Description |
|---|---|---|
title | React.ReactNode | (optional) Optional title for the action item. |
icon | IconIcon | (optional) Optional icon for the action item (e.g. fish_medium). |
href | string | (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). |
target | string | (optional) Link target (e.g. _blank for new tab). Only applicable when href is set. |
rel | string | (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. |
pending | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown (loading state). Disables click and keyboard while active. |
skeleton | boolean | (optional) If set to true, applies skeleton font styling to the item (text placeholder). |
children | React.ReactNode | (optional) Additional cells (e.g. List.Cell.End for value). A chevron icon is rendered at the end automatically. |
List.Item.Basic | Various | (optional) Inherits List.Item.Basic properties (variant, selected, spacing, etc.). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Item.Accordion
| Property | Type | Description |
|---|---|---|
icon | IconIcon | (optional) Optional icon for the accordion header (e.g. fish_medium). |
title | React.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. |
open | boolean | (optional) Initial open state. Defaults to false. The accordion can be toggled by the user via the header. |
children | React.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.Basic | Various | (optional) Inherits List.Item.Basic properties (variant, pending, spacing, etc.). |
List.Item.Accordion.Header
| Property | Type | Description |
|---|---|---|
children | React.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.Basic | Various | (optional) Inherits List.Item.Basic properties (variant, pending, spacing, etc.). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Item.Accordion.Content
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (required) Content displayed inside the expandable accordion body. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Title
| Property | Type | Description |
|---|---|---|
fontSize | 'small' 'basis' | (optional) Font size of the title content. Defaults to basis. Use small for smaller text. |
children | React.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. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Title.Overline
| Property | Type | Description |
|---|---|---|
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. |
children | React.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. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Title.Subline
| Property | Type | Description |
|---|---|---|
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. |
children | React.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. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Start
| Property | Type | Description |
|---|---|---|
fontSize | 'small' 'basis' | (optional) Font size of the start content. Defaults to basis. Use small for smaller text. |
children | React.ReactNode | (required) Start content of the list item (e.g. icon, label). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Center
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (required) Center content of the list item. Grows to fill available space. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.End
| Property | Type | Description |
|---|---|---|
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. |
children | React.ReactNode | (required) End content of the list item (e.g. value, action). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
List.Cell.Footer
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (required) Footer content of the list item. Grows to fill available space. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |