CallOutBanner

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