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.

actionsReact.NodeActions - especially Buttons of the CallOutBanner that will be rendered on the bottom.
childrenReact.NodeThe children of the CallOutBanner.
dataTeststringOptional prop for testing purposes.
idstringSet id for CallOutBanner
descriptionTranslationThe displayed description of the CallOutBanner.
illustrationReact.Element<typeof Illustration>The displayed Illustration of the CallOutBanner.
onClick() => void \| PromiseFunction for handling onClick callback. See functional specs.
tabIndexstring \| numberSpecifies the tab order of an element.
titleTranslationThe 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.