CallOutBanner / React
Encourages users to take an action to add additional services or the like.
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>
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. | |
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 passonClick
or specify customtabIndex
, the CallOutBanner will be focus-able.