Modal
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 = ?
| Name | Type | Description |
|---|---|---|
| open | boolean |
Whether the modal is open. |
| title | string |
Title content for the modal, when rendered. |
| primaryAction? | DestructableAction |
Modal's primary action, ie 'Save' or 'Accept'. |
| secondaryActions? | DestructableAction[] |
Modal's secondary action(s), ie 'Cancel'. |
| onClose | () => void |
Callback when the modal is closed. |
DestructableAction
Anchor link to section titled "DestructableAction"| Name | Type | Description |
|---|---|---|
| content | string |
Action label text. |
| onAction? | () => void |
Callback for the action. |
| destructive? | boolean |
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.