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>

Item 1
Item 2
Item 3

reversed


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

Item 1
Item 2
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

Name	Type	Default
`type`	`"ul" \| "ol" \| "dl"` The type of list to render.	`'ul'`
`listStyleType`	`ListStyleType \| readonly string[] \| undefined` The CSS `listStyleType` property to apply to the list.	`'disc'`
`reversed`	`boolean` If `true`, the list will be reversed. Only applies to ordered lists.	`false`
`start`	`number` The starting index for ordered lists.	`1`
`children`	`ReactNode`
`attributes`	`Attributes` 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' };`