harmony-modal-pattern

Review fetch https://storybook-harmony.ofp-elr.optum.com/?path=/docs/patterns-modal--docs&e2e=1&globals=viewport:mastheadSidebar275

Overview

The Modal pattern is a temporary overlay dialog that focuses user attention on a single task or piece of information. It intentionally blocks interaction with the underlying page until the user completes or dismisses the modal, so it should be used sparingly.

This pattern composes a trigger control with Modal, Modal.Body, and Modal.Actions. Keep content concise, action-oriented, and scoped to one decision or short workflow.

Template Variants

With Content (./templates/with-content.tsx)

Use when: You need a focused confirmation, acknowledgement, or short workflow that requires explicit user action before returning to the page.

Components: trigger Button + Modal + Modal.Body + Modal.Actions

Best for: Destructive confirmations, short approval flows, simple data-entry tasks, or important informational dialogs that must interrupt the current page.

Usage

• Launch the modal from a deliberate user action such as a button click.
• Put the primary task or supporting content in Modal.Body.
• Keep dismiss and completion actions in Modal.Actions.
• If content can exceed the viewport, make the body region scrollable and keyboard reachable.

Templates

• ./templates/with-content.tsx