List

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

List component 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>
  );
}

Props

interface ListProps
gap?'extraTight' | 'loose'

Determines the space between list items.

Defaults to 'loose'.

type?'bullet' | 'number'

Type of list to display.

Defaults to 'bullet'.

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 vertical stack component.

    On this page