List
Data Display

List

Generic vertical list primitive, used as the base for ActivityFeed, InboxPanel, and one-off rows of items. Includes ListItem, ListSection, and ListDivider.

Component behavior

List is for collections that read as items rather than records: one primary label per row, optional supporting detail, no column alignment across rows. If values need to line up vertically across rows, use a table instead.

Use cases
  • Navigable collections — settings, channels, files, results.
  • Rows with a label and secondary detail that need not align.
  • Grouped content, via ListSection and ListDivider.
Alternatives

Table: values should align into columns for comparison.

DataGrid: rows require sorting or selection.

VirtualList: large row counts require virtualization.

TreeView: items form a hierarchy.

List

List extends HTMLAttributes<HTMLUListElement>. Renders as <ul> by default, or <ol> when ordered is set.

ListProps props
PropTypeDefaultDescription
variant"plain" | "divided" | "card""plain"Divided adds borders between rows. Card adds a border around the list.
density"compact" | "normal" | "comfortable""normal"Row spacing density.
orderedboolean—Renders as <ol> with ordered-list semantics.

ListItem

ListItem extends LiHTMLAttributes<HTMLLIElement>. All content is passed as slots; a single component covers bare text, avatar rows, and complex rows.

ListItemProps props
PropTypeDefaultDescription
mediaReactNode—Content before the label.
titleReactNode—Primary row text.
descriptionReactNode—Secondary content below the title.
metaReactNode—Right-aligned secondary content.
actionsReactNode—Trailing controls, kept out of the click target.
selectedboolean—Selected highlight state.
disabledboolean—Greyed out, non-interactive.
navigableboolean—Shows a chevron and hover styling for navigation rows.

ListSection

ListSection is a section heading inside a List.

ListSectionProps props
PropTypeDefaultDescription
childrenReactNode—Section heading text.
actionReactNode—Right-aligned content.
stickyboolean—Keeps the heading pinned while its section scrolls.

ListDivider

ListDivider extends HTMLAttributes<HTMLLIElement>. A border between rows for lists that are otherwise "plain".

ListDividerProps has no custom props.

Examples

Card variant with media, title, description, meta

List card variant with rich items

Selected and navigable items

Selected and navigable items

Divided variant

List divided variant
ImportTSX
import { List, ListItem, ListSection, ListDivider } from "@solarius/onset";