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.
Name | Type | Default | Description |
---|---|---|---|
dataTest | string | Optional prop for testing purposes. | |
label | string | Set the first text | |
value | string | Set the second text | |
size | enum | "normal" | The size of the KeyValue |
icon | The displayed icon between label and value | ||
spacing | spacing | "medium" | The spacing between its children. |
direction | "row" \| "column" | column | The flex-direction of the KeyValue. |
size
size |
---|
"normal" |
"large" |
spacing
name | size on 992px - ∞ |
---|---|
"none" | null |
"XXXSmall" | 2px |
"XXSmall" | 4px |
"XSmall" | 8px |
"small" | 12px |
"medium" | 16px |
"large" | 24px |
"XLarge" | 32px |
"XXLarge" | 40px |