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>

Table below contains all types of the props available in the CallOutBanner component.

Name	Type	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 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.