List

A component used to display collections of data in a consistent manner.

A List can be used to list more complex types of data than the standard Chakra UI List component.

Import#

  • List: The wrapper component that handles default composition.
  • ListHeader: A title to indicate a group of items.
  • ListItem: The list item container.
  • ListItemIcon: The list item icon.
  • ListItemButton: Component used for clickable items.
  • ListItemLabel: Component that displays the item primary and secondary text.
  • ListItemTertiary: Extra data displayed next to the item label.
  • ListItemAction: The secondary item action.
import {
  List,
  ListHeader,
  ListItem,
  ListItemIcon,
  ListItemButton,
  ListItemLabel,
  ListItemTertiary,
  ListItemAction,
} from '@saas-ui/react'

Usage#

Basic List#

<List
  items={[
    {
      primary: 'Elliot Alderson',
      secondary: 'Hacker',
      tertiary: <Tag>admin</Tag>,
    },
    {
      primary: 'Martin Wallström',
      secondary: 'CEO',
      tertiary: <Tag>owner</Tag>,
    },
  ]}
/>

Clickable with action#

<List
  items={[
    {
      href: '#',
      icon: <Avatar name="Elliot Alderson" size="sm" />,
      primary: 'Elliot Alderson',
      secondary: 'Hacker',
      tertiary: <Tag>admin</Tag>,
      action: <IconButton icon={<SettingsIcon />} />,
    },
    {
      href: '#',
      icon: <Avatar name="Martin Wallström" size="sm" />,
      primary: 'Martin Wallström',
      secondary: 'CEO',
      tertiary: <Tag>owner</Tag>,
      action: <IconButton icon={<SettingsIcon />} />,
    },
  ]}
/>

Composed#

<Card width="100%" maxW="320px">
  <Box as="nav">
    <List>
      <ListItem as="a" href="#home">
        <ListItemIcon as={FiHome} />
        <ListItemLabel primary="Home" />
      </ListItem>
      <ListItem as="a" href="#inbox">
        <ListItemIcon as={FiInbox} />
        <ListItemLabel primary="Inbox" />
        <ListItemTertiary>
          <Badge borderRadius="full">20</Badge>
        </ListItemTertiary>
      </ListItem>
    </List>
  </Box>
  <Divider />
  <Box as="nav">
    <List>
      <ListItem as="a" href="#spam">
        <ListItemLabel>Spam</ListItemLabel>
      </ListItem>
      <ListItem as="a" href="#trash">
        <ListItemLabel>Trash</ListItemLabel>
      </ListItem>
    </List>
  </Box>
</Card>

Nested#

function NestedNav() {
  const { isOpen, getToggleProps, getCollapseProps } = useCollapse()
  return (
    <Card width="100%" maxW="320px">
      <Box as="nav">
        <List>
          <ListItem as="a" href="#home">
            <ListItemIcon as={FiHome} />
            <ListItemLabel primary="Home" />
          </ListItem>
          <ListItem as="a" href="#inbox" {...getToggleProps()}>
            <ListItemIcon as={FiInbox} />
            <ListItemLabel primary="Inbox" />
            <ListItemTertiary>
              <Badge borderRadius="full">20</Badge>
              {isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
            </ListItemTertiary>
          </ListItem>
          <Collapse {...getCollapseProps()}>
            <List>
              <ListItem as="a" href="#spam">
                <ListItemLabel ps={12}>Spam</ListItemLabel>
              </ListItem>
              <ListItem as="a" href="#trash">
                <ListItemLabel ps={12}>Trash</ListItemLabel>
              </ListItem>
            </List>
          </Collapse>
        </List>
      </Box>
    </Card>
  )
}

Props#

List Props#

items

Description

An array of list items

Type
ListItemProps[]

ListItem Props#

action

Type
ReactNode

href

Type
string | object

icon

Type
any

onClick

Type
((e: MouseEvent<Element, MouseEvent>) => void)

primary

Type
ReactNode

secondary

Type
ReactNode

tertiary

Type
ReactNode

ListItemIcon Props#

size

Description

The icon size

Type
ResponsiveValue<Union<number | "px" | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "2" | "3" | ... 56 more ... | "min-intrinsic">>
Default
5

spacing

Description

The icon spacing, ltr supported

Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>

ListItemLabel Props#

primary

Type
ReactNode

secondary

Type
ReactNode

ListItemTertiary Props#

spacing

Description

Spacing between items

Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>
Default
2

Was this helpful?