Code

Usage

import { List, ListItem } from "@twilio-labs/match/components";
const Component = () => (
<List>
<ListItem>Ahoy</ListItem>
<ListItem>World</ListItem>
</List>
);

List Props

PropTypeDefaultDescription
variant?ListVariant'bulleted''bulleted', 'numbered', 'icon'
size?ListSize'normal''normal', 'small'
inverse?booleanfalseUse inverse styles on dark backgrounds.

Also supports margin props.

List Item Props

PropTypeDefaultDescription
additional?stringnullSupporting text displayed below list item contents.

Guidelines

About Lists

Lists are a grouping of list items that are represented consecutively one after the other and delineated by numeric, bulleted or iconic markings. Lists may be ordered or unordered. If the meaning of the content would change be reordering the list items, use an ordered (numbered) list. Otherwise use an unordered (bulleted, icon) list.

Accessibility

Always group ListItem within a List component. When nesting lists, ensure that ListItem is a direct descendant of List.


Composition

Of the available list variants, numbered is the only one which provides semantic meaning to the order of items.

Do
  • Use bulleted or icon lists for more randomized lists.
  • Use nested lists to provide additional, related information to parent list items.
Don't
  • Use a numbered list or a nested list where items don't have a specific order.
  • Use nested lists that contain items that are unrelated to the parent list item.

Examples

Bulleted

Use the bulleted variant for lists with no significant meaning to the order of items. This is the default List variant.

Numbered

Use the numbered variant for lists with any significance to the order of items.

Nested

Lists may be nested within other list items.

Additional Text

Icon

Use the icon variant for decorative lists with no significant meaning to the order of items.

Inverse

All List variants support inverse themes.

Size

The List component supports normal and small sizes.