Modal
Overview
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.
Configuration
The modal block can be configured with the following fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the title heading |
| Body | rich text | Content for the body section |
| Complete label | string | Content for the complete button |
| Dismiss label | string | Content for the dismiss button |
You can also define a set of custom fields on a modal block.
Transitions
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.
| Transition | Description |
|---|---|
| complete | Marks the modal as completed |
| dismiss | Marks the modal as dismissed |
Integrating
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.