Components

ListItem

One row of a list: a leading visual, a title and subtitle, and meta or an action at the end.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { ListItem } from '@bigbang/ui';
Source: ListItem.tsx
Storybook: ListItem · Playground

ListItem is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

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

<ListItem.List divided aria-label="Settings">
  <ListItem title="Settings" subtitle="Account and appearance" meta="Today" />
  <ListItem title="Notifications" render={<a href="/notifications" />} />
</ListItem.List>;

The part prop types are exported too: ListItemLeadingProps, ListItemContentProps, ListItemTitleProps, ListItemSubtitleProps, ListItemMetaProps, ListItemTrailingProps, ListItemListProps.

Props

title

Description: The main text. Required unless you compose the parts yourself through children.
Type: ReactNode

subtitle

Description: A second, smaller line under the title.
Type: ReactNode

meta

Description: Short information at the inline end, such as a date or a count. It stays on one line.
Type: ReactNode

leading

Description: What comes first: an Avatar, an Icon or a thumbnail. Mark an Avatar decorative when the title already names it.
Type: ReactNode

trailing

Description: What comes last. In a row made interactive with render it must not hold a link or a button; use a static row for that.
Type: ReactNode

size

Description: Block padding of 8, 12 or 16 px (sm, md, lg); lg also sets a larger title.
Type: Size
Default: 'md'

variant

Description: outline draws a 1 px border around the row and muted gives it a tinted surface; default has neither.
Type: 'default' | 'outline' | 'muted'
Default: 'default'

selected

Description: Marks the current row: a selected surface and a bar at the inline start, plus aria-current="true" on an interactive row. Use it for navigation, not for toggles.
Type: boolean
Default: false

disabled

Description: Greys the row out. An interactive row also leaves the tab order and ignores clicks (aria-disabled).
Type: boolean
Default: false

truncate

Description: Keeps the title and subtitle on one line and cuts the overflow with an ellipsis. By default the title shows one line and the subtitle two, then an ellipsis.
Type: boolean
Default: false

render

Description: Makes the row one interactive target: <a href="…" />, <button type="button" /> or a router link. Without it the row is static.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: margins and grid placement. Do not use it to change colour or padding.
Type: string

children

Description: The row parts: ListItem.Leading, ListItem.Content, ListItem.Meta and ListItem.Trailing. When set, title, subtitle, meta, leading and trailing are not drawn.
Type: ReactNode

Native attributes (id, data-*) pass through to the root <li>. States such as aria-current and data-selected are set on the row.

Parts

Part	Element	Props
`ListItem.List`	`<ul>`	`divided`, `animate`, `className` and native `ul` attributes. Comes with `role="list"`.
`ListItem.Leading`	`<div>`	Native attributes. The start slot.
`ListItem.Content`	`<div>`	Native attributes. Takes the free width; stacks the title and subtitle.
`ListItem.Title`	`<span>`	Native attributes. `truncate` comes from the root.
`ListItem.Subtitle`	`<span>`	Native attributes.
`ListItem.Meta`	`<span>`	Native attributes. One line.
`ListItem.Trailing`	`<div>`	Native attributes. The end slot.

With children, title, subtitle, meta, leading and trailing are not drawn; you compose the parts.

Data attributes

data-component="list-item", data-size, data-selected, data-disabled, data-interactive: on the root <li>. data-selected and data-disabled are also on the row.
data-part: row, leading, content, title, subtitle, meta, trailing. The list carries data-component="list".

Router link

import { ListItem } from '@bigbang/ui';
import { Link } from 'react-router';

<ListItem title="Settings" selected render={<Link to="/settings" />} />;

Separate action

<ListItem
  title="First item"
  trailing={
    <Button size="sm" variant="tertiary">
      Edit
    </Button>
  }
/>