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.

Name	Type	Description	Required	Default
style	ListStyleType	List style	🚫	disc
csx	StyleProp	Defines component styles	🚫	{}

List.Item

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

Name	Type	Description	Required	Default
csx	StyleProp	Defines component styles	🚫	{}