List

Lists display a set of related text-only content. Each list item begins with a bullet or a number.

Examples

Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator.

import {List} from '@shopify/polaris';
import React from 'react';

function ListExample() {
  return (
    <List type="bullet">
      <List.Item>Yellow shirt</List.Item>
      <List.Item>Red shirt</List.Item>
      <List.Item>Green shirt</List.Item>
    </List>
  );
}

Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.

import {List} from '@shopify/polaris';
import React from 'react';

function ListExample() {
  return (
    <List type="number">
      <List.Item>First item</List.Item>
      <List.Item>Second item</List.Item>
      <List.Item>Third Item</List.Item>
    </List>
  );
}

Props

Want to help make this feature better? Please share your feedback.

  • type? Type

    Type of list to display

  • children? React.ReactNode

    List item elements

Best practices

Lists should:

  • Break up chunks of related content to make the information easier for merchants to scan
  • Be phrased consistently (try to start each item with a noun or a verb and be consistent with each item)
  • Not be used for lists where the entire item represents an action

Content guidelines

List items

Every item in a list should:

  • Start with a capital letter
  • Not use commas or semicolons at the end of each line

Do

  • Red
  • Yellow
  • Blue

Don’t

  • Red;
  • Yellow;
  • Blue.
  • Be written in sentence case

Do

  • Item one
  • Item two
  • Item three

Don’t

  • Item One
  • Item Two
  • Item Three


Accessibility

The list component outputs list items (<li>) inside a list wrapper (<ul> for bullet lists or <ol> for numbered lists). By default, list items are conveyed as a group of related elements to assistive technology users.

To group items for layout only, consider using the stack component.

    👋

    We've made some improvements to our website to help you build more efficiently with Polaris.