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, based on fontSize

Type
ResponsiveValue<Union<number | "small" | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "large" | "x-large" | ... 13 more ... | "9xl">>
Default
'xl'

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?