Skip to main content

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

ParameterType
propsListProps
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

MemberType
disabledboolean
iconReact.ReactElement
labelstring
onClick(label?) => void
toolTipContentstring

Source

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


ListProps

ListProps: object

Type declaration

MemberType
customStylestring
itemsListItem[]
onSelected({ index, label }) => void
refLegacyRef<HTMLDivElement>
showDividerboolean

Source

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