@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
49 lines (37 loc) • 1.77 kB
Markdown
# KeyValue
To implement KeyValue component into your project you'll need to add the import:
```jsx
import KeyValue from "@kiwicom/orbit-components/lib/deprecated/KeyValue";
```
After adding import into your project you can use it simply like:
```jsx
<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`](#enum) | `"normal"` | The size of the `KeyValue` |
| icon | | | The displayed icon between label and value |
| spacing | [`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` |