Modals are overlays that prevent merchants from interacting with the rest of the application until a specific action is taken.
Modals are disruptive by design, requiring merchants to take an action before they can continue, so use them thoughtfully and sparingly.
optional = ?
||Whether the modal is open.|
||Title content for the modal, when rendered.|
||Modal's primary action, ie 'Save' or 'Accept'.|
||Modal's secondary action(s), ie 'Cancel'.|
||Callback when the modal is closed.|
||Action label text.|
||Callback for the action.|
||Indicates a dangerous or potentially negative action.|
|✅ Do||🛑 Don't|
|Use modals thoughtfully and sparingly||Avoid overly complex or multi-step content|
|Use modals with a small and simple set of actions to complete|
For more guidelines, refer to Polaris' Modal best practices.