List

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Show a repeated set of independent resources or history entries. Put body text in Content, and status and actions in Actions. Each Item pads its hover surface 16px horizontally and 12px vertically.

• Don't add dividers between items or nest cards. Let the List's spacing and hover surface separate items instead.
• Don't rely on whole-item clicks. Use links and buttons that name their purpose instead.
• Don't use List as a Listbox selection widget. To pick options, use Select, Combobox, or CheckboxGroup instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root(ul role=list) → Item(li) → Content(Title + Description) + Actions

Keyboard and accessibility

Only the inner actions enter the Tab order. Root keeps the native list structure. On small screens, Actions move to the next line.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { List, Button } from '@surflane/ui'

<List.Root aria-label='Registered environments'>
  <List.Item>
    <List.Content>
      <List.Title>DEMO main</List.Title>
      <List.Description>3 discovered services</List.Description>
    </List.Content>
    <List.Actions>
      <Button variant='outline'>Inspect DEMO main</Button>
    </List.Actions>
  </List.Item>
</List.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens