Dialog
Prompts users to take or complete an action.
React
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:
<Dialogtitle="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. |