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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the List, normally ListItem.
dataTeststringOptional prop for testing purposes.
idstringSet id for List
sizeenum"normal"The size of the List.
spaceAfterenumAdditional margin-bottom after component. See this docs
typeenum"primary"The color type of the List.

ListItem Props

Table below contains all types of the props in ListItem component.

NameTypeDefaultDescription
childrenReact.NodeThe content of the ListItem.
dataTeststringOptional prop for testing purposes.
iconReact.Node"CircleSmall"The displayed Icon or CarrierLogo component. See Functional specs
labelTranslationAdds a label to ListItem

enum

sizetype
"small""primary"
"normal""secondary"
"large"

Functional specs

  • You can color your icon if you pass some value into color or customColor prop of the Icon. Be aware of using other components, because they are not styled by default.