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, install the Flows components package. This package provides the modal along with other built-in components. For detailed instructions, see React installation or JavaScript installation.
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. |
Continue text | string | The text of the continue button. When empty the button is not rendered. |
Show close button | boolean | Show a close button in the top right corner. Default is false . |
Hide overlay | boolean | Hide the overlay when the modal is open. Default is false . |
Exit nodes:
- Continue: The user clicks the continue button.
- Close: The user closes the modal.
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. |
Continue text | string | The text of the continue button. When empty the button is not rendered. |
Previous text | string | The text of the previous button. When empty the button is not rendered. |
Show close button | boolean | Show a close button in the top right corner. Default is false . |
Hide overlay | boolean | Hide the overlay when the modal is open. Default is false . |
Page targeting | --- | What page the tour should be shown on. Learn more |
Wait | --- | Used to define what interaction should trigger the next step. Learn more |
Exit nodes:
- Continue: When the user clicks the continue button the tour moves to the next step.
- Previous: When the user clicks the previous button the tour moves to the previous step.
- Cancel: When the user closes the modal the tour is canceled.