Components / data-display

List Item

A row in a list of records or options. Title with optional subtitle, optional leading Avatar and trailing icon.

import { ListItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { ListItem } from '@basiiik/ui';

<ListItem>Ada Lovelace</ListItem>

Hover is CSS and only applies to interactive rows (href or onClick). Selected is selected. Disabled is disabled (aria-disabled).
Compose with: avatar.
Storybook: Data display/List Item.

Props

Prop	Type	Notes
`density`	`"compact" \| "comfortable"`	Default "comfortable"
`children`	`ReactNode`
`subtitle`	`ReactNode`
`subtitle`	`ReactNode`
`leading`	`ReactNode`
`trailing`	`ReactNode`
`trailing`	`ReactNode`
`selected`	`boolean`
`disabled`	`boolean`

Other props

Prop	Type	What it does
`href`	`string`	Makes the row a link.
`onClick`	`(event: MouseEvent<HTMLElement>) => void`	Makes the row a button (when there is no `href`).

States. Hover is CSS and only applies to interactive rows (href or onClick). Selected is selected. Disabled is disabled (aria-disabled).

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

`List`

The list that holds ListItems (<ul>). Give it an aria-label that names the list.

<List aria-label="Members"><ListItem>Ada</ListItem></List>

Use it when

Rows in a list of people, files or options

Do not use it when

Multi-column data (use Table)
Menu options (use Menu Item)

Rules for agents

Put List Items inside a List (a <ul>) and give the List an aria-label when its purpose is not clear from a heading
Give href to make the row a link, or onClick to make it a button; the whole row becomes the target
Use selected for the current row only
leading is decorative (an icon or Avatar); trailing holds a Badge, icon or short text
Use density="compact" for long or dense lists

Avoid

Putting other buttons or links inside an interactive List Item
A List Item for multi-column data (use Table)
List Items as menu options (use Dropdown Menu with MenuItem)
Long paragraphs in subtitle; keep it to one line

Writing the content

The main line identifies the item (a name or title); subtitle adds one supporting detail
Use sentence case

Keyboard

Enter activates interactive rows

Accessibility

selected sets aria-current="true" on the current row

Colour tokens it reads

color.bg.brand.subtlecolor.bg.subtlecolor.border.subtlecolor.icon.disabledcolor.icon.secondarycolor.text.brandcolor.text.disabledcolor.text.primarycolor.text.secondary

data-display 8 Figma variants Try it in the live demo