KeyValue

Renders simple information with provided description.

KeyValue

To implement KeyValue component into your project you’ll need to add the import:

import KeyValue from "@kiwicom/orbit-components/lib/KeyValue";

After adding import into your project you can use it simply like:

<KeyValue label="Key" value="Value" />

Props

Table below contains all types of the props available in KeyValue component.

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
labelstringSet the first text
valuestringSet the second text
sizeenum"normal"The size of the KeyValue
iconThe displayed icon between label and value
spacingspacing"medium"The spacing between its children.
direction"row" \| "column"columnThe flex-direction of the KeyValue.

size

size
"normal"
"large"

spacing

namesize on 992px - ∞
"none"null
"XXXSmall"2px
"XXSmall"4px
"XSmall"8px
"small"12px
"medium"16px
"large"24px
"XLarge"32px
"XXLarge"40px