@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.
35 lines (24 loc) • 2.32 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 \| number` | | 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.