List

A list of items with a visual, title and status.

Linen shirtMaya Janssens · 10:48

Draft

Oak dining chairTom Verbeke · Yesterday

Published

List.tsx

import {
  List,
  ListItem,
  ListItemDescription,
  ListItemStatus,
  ListItemTitle,
  ListItemVisual
} from 'alinea/components'
import {IcOutlineDrafts, IcRoundCheck} from 'alinea/dashboard/icons'

export function ListExample() {
  return (
    <List aria-label="History" style={{width: 360}}>
      <ListItem
        leading={
          <ListItemVisual>
            <IcOutlineDrafts data-slot="icon" />
          </ListItemVisual>
        }
        trailing={<ListItemStatus color="primary">Draft</ListItemStatus>}
      >
        <ListItemTitle>Linen shirt</ListItemTitle>
        <ListItemDescription>Maya Janssens · 10:48</ListItemDescription>
      </ListItem>
      <ListItem
        leading={
          <ListItemVisual>
            <IcRoundCheck data-slot="icon" />
          </ListItemVisual>
        }
        trailing={<ListItemStatus color="success">Published</ListItemStatus>}
      >
        <ListItemTitle>Oak dining chair</ListItemTitle>
        <ListItemDescription>Tom Verbeke · Yesterday</ListItemDescription>
      </ListItem>
    </List>
  )
}

Props

`<List>`

PropTypeDefaultDescription

emptybooleanDefault –Renders the list as a status region, for a list holding ListEmpty

Also accepts every prop of Surface.

`<ListItem>`

PropTypeDefaultDescription

leadingReactNodeDefault –

trailingReactNodeDefault –

innerReactNodeDefault –

onClick() => voidDefault –Makes the item actionable: its header renders as a button

selectedbooleanDefault –

Also accepts every prop of a <div> element.

`<ListItemVisual>`

Accepts every prop of a <span> element.

`<ListItemTitle>`

Accepts every prop of a <span> element.

`<ListItemDescription>`

Accepts every prop of a <span> element.

`<ListItemStatus>`

PropTypeDefaultDescription

Also accepts every prop of a <span> element.

`<ListEmpty>`

PropTypeDefaultDescription

iconIconTypeDefault –

title*ReactNodeDefault –

Also accepts every prop of a <div> element.

`<ListLabel>`

PropTypeDefaultDescription

expanded*booleanDefault –

hasRowsbooleanDefault –

sharedbooleanDefault –

requiredbooleanDefault –Marks the label with an asterisk, like a required field label

showFoldbooleanDefault true

descriptionReactNodeDefault –

inlinebooleanDefault false

Also accepts every prop of Button.

`<ListError>`

Accepts every prop of a <div> element.