This library is still in development and is available only for internal usage at VTEX.
Skip to main content

List (deprecated)

List (deprecated)

Version: Next

List (deprecated)

This component is deprecated. Use the <ul> / <ol> elements to replace it.

<List> renders a <ul> element by default with reset styles.

Import

import { List, ListProps } from '@vtex/admin-ui'

Behavior

<List>
<List.Item>Coffee</List.Item>
<List>
<List.Item>Arabica</List.Item>
<List.Item>Robusta</List.Item>
</List>
<List.Item>Juice</List.Item>
<List.Item>Tea</List.Item>
</List>

Variation

Ordered

<List as="ol">
<List.Item>Coffee</List.Item>
<List.Item>Juice</List.Item>
<List.Item>Tea</List.Item>
<List as="ol">
<List.Item>With Milk</List.Item>
<List.Item>Without Milk</List.Item>
</List>
</List>

Customization

You can use the csx property to handle different styles.

Example

<List style="square">
<List.Item className={csx({ bg: 'muted', color: 'muted' })}>Coffe</List.Item>
<List>
<List.Item>Arabica</List.Item>
<List.Item>Robusta</List.Item>
</List>
<List.Item>Juice</List.Item>
<List.Item>Tea</List.Item>
</List>

Props

List

Besides the props listed bellow, you can use all the props accepted by the ul JSX element.

NameTypeDescriptionRequiredDefault
styleListStyleTypeList style🚫disc
csxStylePropDefines component styles🚫{}

List.Item

Besides the props listed bellow, you can use all the props accepted by the li JSX element.

NameTypeDescriptionRequiredDefault
csxStylePropDefines component styles🚫{}