List

Updated: July 31, 2025

A component for creating an ordered or unordered list of items. The List component can be used to create nested lists and supports Flex props. The ListItem component can be used to create list items and supports Text props.

List

Item 1

Subitem 1

Item 2

Subitem 1
Subitem 2

Subsubitem 1
Subsubitem 2
Subsubitem 3

Subitem 2

Item 3
Item 4

<List as="ol" textVariant="body-default-m" gap="4">
  <ListItem>Item 1</ListItem>
  <List as="ul" gap="4" paddingLeft="24">
    <ListItem>Subitem 1</ListItem>
  </List>
  <ListItem>Item 2</ListItem>
  <List as="ul" gap="4" paddingLeft="24">
    <ListItem>Subitem 1</ListItem>
    <ListItem>Subitem 2</ListItem>
    <List as="ul" gap="4" paddingLeft="24">
      <ListItem variant="body-default-s">Subsubitem 1</ListItem>
      <ListItem variant="body-default-s">Subsubitem 2</ListItem>
      <ListItem variant="body-default-s">Subsubitem 3</ListItem>
    </List>
    <ListItem>Subitem 2</ListItem>
  </List>
  <ListItem>Item 3</ListItem>
  <ListItem>Item 4</ListItem>
</List>

List API reference

Prop	Type	Default
as Bulleted or numbered.	ulol	ul
children The items.	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

ListItem API reference

Prop	Type	Default
className	string	—
style	React.CSSProperties	—
…and every TextProps prop	inherited	—

ComponentsLine

ComponentsLogo

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club