BRAID
Braid Logo
 

List

  • Bullet
  • Bullet
  • Bullet
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
  • Icon
  • Icon
  • Icon
Open in Playroom

Accessibility

List semantics are handled for you automatically, including the use of ordered lists where appropriate.

Types of lists

A List can select a delimiter for its items by specifying the type prop, with supported values being bullet, number, alpha and roman characters.A type of icon may also be used, which then requires an icon component be provided to the icon prop.
  • Bullet
  • Bullet
  • Bullet
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
  • Icon
  • Icon
  • Icon
Open in Playroom

Tone and size

Lists support the same sizes and tones as Text.
  • Large
  • Large
  • Large
  • Standard
  • Standard
  • Standard
  • Small
  • Small
  • Small
  • Xsmall
  • Xsmall
  • Xsmall
Open in Playroom

Spacing

By default, Lists will use small spacing, or xsmall spacing if the size prop is set to either small or xsmall. This can be changed via the space prop, which supports the same spacing as Stack.
  • Large
  • Large
  • Large
  • Standard
  • Standard
  • Standard
  • Small
  • Small
  • Small
  • Xsmall
  • Xsmall
  • Xsmall
Open in Playroom

Rich content

You can use a Stack as a list item to display multiple lines of text.
  • This is a paragraph.This is another paragraph.
  • This is a paragraph.This is another paragraph.
Open in Playroom

Nested lists

Lists of varying types can be nested within each other.
  1. Number list
    1. Alpha list
    2. Alpha list
    3. Alpha list
  2. Number list
    1. Alpha list
    2. Alpha list
    3. Alpha list
Open in Playroom

Custom start position

Lists can be started from a higher number if needed.
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<List
  data={{ testid: 'list-1' }}
  // => data-testid="list-1"
>
  ...
</List>
Open in Playroom