@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.
41 lines (29 loc) • 2.27 kB
Markdown
# IllustrationPrimitive
To implement IllustrationPrimitive component into your project you'll need to add the import:
```jsx
import IllustrationPrimitive from "@kiwicom/orbit-components/lib/primitives/IllustrationPrimitive";
```
After adding import into your project you can use it simply like:
```jsx
<IllustrationPrimitive name="Accommodation" size="small" />
```
## Usage
As with every primitive, you should have a good reason to use `IllustrationPrimitive`, prefer usage of `Illustration` and `AirportIllustration` as they are typed more strictly.
## Props
Table below contains all types of the props available in IllustrationPrimitive component.
| Name | Type | Default | Description |
| :------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------------------- |
| alt | `string` | | Optional property for passing own `alt` attribute to the DOM image element. By default, the `name` of illustration is used. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for IllustrationPrimitive |
| **name** | `string` | | Name for the displayed illustrationPrimitive. |
| size | [`enum`](#enum) | `"medium"` | The size of the IllustrationPrimitive. |
| margin | `string \| number \| Object` | | Utility property to set margin. |
### enum
| size |
| :------------- |
| `"extraSmall"` |
| `"small"` |
| `"medium"` |
| `"large"` |
| `"display"` |