List

​

What it is

A flat, vertically stacked set of simple rows, each separated by a bottom border, most often holding an icon and a line of text or a clickable action. It wraps the underlying element’s own List, ListItem, and related parts; Titan’s own file adds three boolean props on top.

​

Live example

​

Exports

​

Vocabulary

“List” names two unrelated things in this package. This page’s List is a static, flat display of rows. AddList — a separate, form-oriented component with its own add/remove/row-limit model — shares the word by coincidence, not by relation. See Choose something else when for the distinction; if you mean editable, repeatable form rows, you mean AddList, not this page.

​

Choose List when

• Showing a short, vertically stacked set of simple items — text, an icon-and-text row, or a clickable row — where comparing a column of values across many records isn’t the task.
• The items are largely uniform in structure but don’t need a table’s alignment, sorting, or per-cell rendering.

​

Choose something else when

​

Anatomy

ListItemAvatar has no Titan theme override — confirmed: only the list-item and list-item-icon slots appear as theme override entries in List.overrides.ts.

​

Variants, sizes, and states

Hand-confirmed from List.overrides.ts and the component’s own stories — no per-component matrix emitter exists yet for this concept.

​

Edge and failure states

​

Tokens

Hand-confirmed from List.overrides.ts — no per-component token emitter exists yet for this concept, so this table is hand-confirmed rather than generated.

​

Composition

A List’s items may hold ListItemIcon, ListItemAvatar (unthemed), and ListItemText. A clickable row wraps its content in ListItemButton, with disablePadding set on the parent ListItem — the pattern both BasicList and BasicListNoIcons use, so the button owns the row’s own padding rather than doubling it with the item’s. A ListSubheader groups related items under a label.

​

Content

No explicit content rule is recorded in source beyond what the demonstrated stories show: short, single-line primary text per row (ListItemText’s primary), with an optional icon. Treat general copy guidance as what applies otherwise.

​

Accessibility

• Confirmed: List renders with role="list" — verified directly in List.test.tsx, which queries it with screen.getByRole('list').
• No test or story exercises keyboard navigation of a row wrapped in ListItemButton — the component’s own test suite only asserts CSS class presence, not interaction.
• Unconfirmed: whether a ListSubheader is exposed to assistive technology as a group name for the items beneath it. No test confirms this.

​

Constraints

​

Known issues

​

Why it works this way

List’s real, working decision is small: a bottom border under every row and a wider icon gutter, both pulled from tokens. The three props that read as bigger decisions — no border, no hover, bulleted — were written into the component and its own JSDoc comment (“Optional border removal,” “Hover effect toggle,” “Bulleted list style option”) but never wired to any style rule. This page records that as TITAN-DIV-30 rather than papering over it.

​

Status

Package @invoca/titan-core, version 3.6.3. Primary export: List. No deprecation marker or since field is recorded in source.

​

Related

Titan’s own utilization.md records 15 usages across 9 products: dashboard-header (3), auth-management (3), ai-model-management (2), manage-invoca-tags (2), ivr-campaigns (1), ai-labs (1), intent-detection (1), developer-tools (1), and signals (1).

• Table — for records compared attribute by attribute
• Card — for rows that need their own border, states, or richer layout
• Avatar — the common leading element in a list row