List
To implement List component into your project you’ll need to add the import:
import List, { ListItem } from "@kiwicom/orbit-components/lib/List";
After adding import into your project you can use it simply like:
<List><ListItem>Hello world!</ListItem></List>
Props
Table below contains all types of the props available in List component.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.Node | The content of the List, normally ListItem. | |
| dataTest | string | Optional prop for testing purposes. | |
| id | string | Set id for List | |
| size | enum | "normal" | The size of the List. |
| spaceAfter | enum | Additional margin-bottom after component. See this docs | |
| type | enum | "primary" | The color type of the List. |
ListItem Props
Table below contains all types of the props in ListItem component.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.Node | The content of the ListItem. | |
| dataTest | string | Optional prop for testing purposes. | |
| icon | React.Node | "CircleSmall" | The displayed Icon or CarrierLogo component. See Functional specs |
| label | Translation | Adds a label to ListItem |
enum
| size | type |
|---|---|
"small" | "primary" |
"normal" | "secondary" |
"large" |
Functional specs
- You can color your icon if you pass some value into
colororcustomColorprop of the Icon. Be aware of using other components, because they are not styled by default.