Skip to main content


Modal block


A modal block is used to represent a modal component in your flow.

Modals are great for focusing a user’s attention on important information in a dialog interface separate from the rest of the content on the page. They are typically used for welcoming users to your product or announcing feature updates.

Modals can be completed or dismissed. Completing a modal could be attributed to clicking a "Continue" or "Got it" button. Dismissing a modal could be attributed to clicking a close icon or a "Cancel" button.


The modal block can be configured with the following fields:

TitlestringContent for the title heading
Bodyrich textContent for the body section
Complete labelstringContent for the complete button
Dismiss labelstringContent for the dismiss button

You can also define a set of custom fields on a modal block.


The modal block has a fixed set of transitions that determine which path(s) to follow. These transitions map to modal actions that a user can take.

completeMarks the modal as completed
dismissMarks the modal as dismissed


Get up and running quickly with the pre-built React modal component. Compose and style this component to best fit your needs. Or use the modal block headlessly and attach the modal’s fields and state to your own modal UI component.