CallOutBanner
Encourages users to take an action to add additional services or the like.
GuidelinesReact
To implement CallOutBanner component into your project you’ll need to add the import:
import CallOutBanner from "@kiwicom/orbit-components/lib/CallOutBanner";
After adding import into your project you can use it simply like:
<CallOutBanner>Hello World!</CallOutBanner>
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. | |
| tabIndex | string \| number | Specifies the tab order of an element. | |
| title | Translation | The displayed title of the CallOutBanner. |
When you pass some
onClickcallback, 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
tabIndexis null, so it’s not possible to focus it. If you either passonClickor specify customtabIndex, the CallOutBanner will be focus-able.