@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.
28 lines (24 loc) • 2.02 kB
Markdown
# CallOutBanner
To implement CallOutBanner component into your project you'll need to add the import:
```jsx
import CallOutBanner from "@kiwicom/orbit-components/lib/CallOutBanner";
```
After adding import into your project you can use it simply like:
```jsx
<CallOutBanner>Hello World!</CallOutBanner>
```
## Props
Table below contains all types of the props available in the CallOutBanner component.
| Name | Type | Default | Description |
| :------------ | :------------------------------------ | :-------------- | :------------------------------- |
| actions | `React.Node` | | Actions - especially Buttons of the CallOutBanner that will be rendered on the bottom.
| children | `React.Node` | | The children of the CallOutBanner.
| dataTest | `string` | | Optional prop for testing purposes.
| description | `Translation` | | The displayed description of the CallOutBanner.
| illustration | `React.Element<typeof Illustration>` | | The displayed Illustration of the CallOutBanner.
| onClick | `() => void \| Promise` | | Function for handling onClick callback. See [functional specs](#functional-specs).
| tabIndex | `string` | | Specifies the tab order of an element.
| **title** | `Translation` | | The displayed title of the CallOutBanner.
## Functional specs
* When you pass some `onClick` callback, the CallOutBanner will be actionable. That means that it will be possible to click on it and it will have proper elevation level.
* By default, the `tabIndex` is null, so it's not possible to focus it. If you either pass `onClick` or specify custom `tabIndex`, the CallOutBanner will be focus-able.