Component librariesBasics V2
Modal
Focus user attention on important information in a dialog separate from the rest of the page.
Overview
The modal component is great for focusing user attention on important information in a dialog separate from the rest of the page. It is typically used for welcoming users to your product or announcing new features. You can use the modal component out of the box as a built-in component.
Installation
To integrate the modal component into your application, follow the steps described in the library installation guide.
Workflow properties
When using the modal component in a workflow, you can define the following properties:
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the modal. |
| Body | string | The body of the modal. Supports HTML. |
| Primary button | action | The primary button, see Action for all options. When empty the button is not rendered. |
| Secondary button | action | The secondary button, see Action for all options. When empty the button is not rendered. |
| Position | select | On which part of the screen the modal should appear. Default is center. |
| Size | select | The size of the modal. Default is small. |
| Dismissible | boolean | Shows a close button linked to the close exit node. Default is false. |
| Hide overlay | boolean | Hides the dark overlay behind the modal. Default is false. |
| Page targeting | --- | What page the modal should be shown on. Learn more |
Exit nodes:
- Continue
- Close
Tour properties
When using the modal component in a tour, you can define additional properties to control the tour flow.
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the modal. |
| Body | string | The body of the modal. Supports HTML. |
| Primary button | action | The primary button, see Action for all options. When empty the button is not rendered. |
| Secondary button | action | The secondary button, see Action for all options. When empty the button is not rendered. |
| Position | select | On which part of the screen the modal should appear. Default is center. |
| Size | select | The size of the modal. Default is small. |
| Hide progress | boolean | Hides the tour progress indicator from the modal. Default is false. |
| Dismissible | boolean | Shows a close button linked to the cancel exit node of the Tour block. Default is false. |
| Hide overlay | boolean | Hides the dark overlay behind the modal. Default is false. |
| Page targeting | --- | What page the modal should be shown on. Learn more |
| Wait | --- | Used to define what interaction should trigger the next step. Learn more |
Exit nodes:
- Continue: Proceeds to the next step in the tour
- Previous: Goes back to the previous step in the tour
- Cancel: Cancels the entire tour
Last updated on