Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide

List

This component displays information in a list format.

Basic Usage

import { List, ListItem } from '@krakentech/coral'; <List listStyleType="disc"> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>
  • Item 1
  • Item 2
  • Item 3

Properties

type

<List type="ol"> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>
  1. Item 1
  2. Item 2
  3. Item 3

reversed

<List type="ol" start={3} reversed> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>
  1. Item 1
  2. Item 2
  3. Item 3

listStyleType

<List listStyleType="lower-roman"> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>
  • Item 1
  • Item 2
  • Item 3

Full API

NameTypeDefault
type"ul" | "ol" | "dl"

The type of list to render.

'ul'
listStyleTypeListStyleType | readonly string[] | undefined

The CSS listStyleType property to apply to the list.

'disc'
reversedboolean

If true, the list will be reversed. Only applies to ordered lists.

false
startnumber

The starting index for ordered lists.

1
childrenReactNode
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };
Last updated on