List

Components

List()

List(props, context?): ReactNode

A List component is basically a Card that contains multiple items listed line by line. A List differs from a Dropdown in many ways:

• A list displays all the items at once while a dropdown only shows one item until clicked.
• A list is better for multiple selections or navigation. A dropdown is better for single selections and forms.

Parameters

Parameter	Type
props	ListProps
context?	any

Returns

ReactNode

Example

    <List
      items={[
      { label: 'Upload', icon: <ArrowUpOnSquareIcon />, onClick: () => ({}) },
      { label: 'Edit', icon: <PencilIcon />, onClick: () => ({}) }]}
    />

Source

libs/design-system-core/src/components/List/index.tsx:47

Props

ListItem

ListItem: object & TextProps

Type declaration

Member	Type
disabled	boolean
icon	React.ReactElement
label	string
onClick	(label?) => void
toolTipContent	string

Source

libs/design-system-core/src/components/List/index.tsx:11

---

ListProps

ListProps: object

Type declaration

Member	Type
customStyle	string
items	ListItem[]
onSelected	({ index, label }) => void
ref	LegacyRef<HTMLDivElement>
showDivider	boolean

Source

libs/design-system-core/src/components/List/index.tsx:19