Dialog / React

Prompts users to take or complete an action.

To implement Dialog component into your project you’ll need to add the import:

import Dialog from "@kiwicom/orbit-components/lib/Dialog";

After adding import into your project you can use it simply like:

<Dialog
  title="Are you sure you want to log out now?"
  primaryAction={<Button type="critical">Log out</Button>}
/>

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

Name	Type	Description
dataTest	`string`	Optional prop for testing purposes.
renderInPortal	`boolean`	Optional prop, set it to `false` if you’re rendering Dialog inside a custom portal, defaults to `true`
description	`React.Node`	Optional description of the main action that Dialog performs.
illustration	`React.Node`	Optional illustration of the Dialog.
primaryAction	`React.Node`	Primary and required action that user can do with the Dialog.
secondaryAction	`React.Node`	Optional, secondary action that user can perform – possibility to close the Dialog most of the time.
onClose	`() => void \| Promise`	The title of the Dialog – preferably the purpose of the main action.
title	`React.Node`	The title of the Dialog – preferably the purpose of the main action.