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.

Props

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

Name Type Description
content string Action label text.
onAction? () => void Callback for the action.
destructive? boolean Indicates a dangerous or potentially negative action.

Guidelines

✅ 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.

On this page