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:

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.

dataTeststringOptional prop for testing purposes.
idstringSet id for Dialog
renderInPortalbooleanOptional prop, set it to false if you’re rendering Dialog inside a custom portal, defaults to true
descriptionReact.NodeOptional description of the main action that Dialog performs.
illustrationReact.NodeOptional illustration of the Dialog.
primaryActionReact.NodePrimary and required action that user can do with the Dialog.
secondaryActionReact.NodeOptional, secondary action that user can perform - possibility to close the Dialog most of the time.
lockScrollingbooleantrueWhether to prevent scrolling of the rest of the page while Dialog is open. This is on by default to provide a better user experience.
onClose() => void \| PromiseThe title of the Dialog - preferably the purpose of the main action.
titleReact.NodeThe title of the Dialog - preferably the purpose of the main action.
maxWidthnumberSet max-width for Dialog