Docs

Components

Modal

Focus user attention on important information in a dialog separate from the rest of the page.

Modal

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:

NameTypeNotes
TitlestringThe title of the modal.
BodystringThe body of the modal. Supports HTML.
Continue textstringThe text of the continue button. When empty the button is not rendered.
Show close buttonbooleanShow a close button in the top right corner. Default is false.
Hide overlaybooleanHide 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.

NameTypeNotes
TitlestringThe title of the modal.
BodystringThe body of the modal. Supports HTML.
Continue textstringThe text of the continue button. When empty the button is not rendered.
Previous textstringThe text of the previous button. When empty the button is not rendered.
Show close buttonbooleanShow a close button in the top right corner. Default is false.
Hide overlaybooleanHide 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.

On this page