Focus Modal

A component for rendering a modal dialog shown over the main content.

In this guide, you'll learn how to use the Focus Modal component.

Usage#

Code
import { FocusModal } from "@medusajs/ui"

Code
1<FocusModal>2  <FocusModal.Trigger>Trigger</FocusModal.Trigger>3  <FocusModal.Content>4    <FocusModal.Header>Title</FocusModal.Header>5    <FocusModal.Body>Content</FocusModal.Body>6  </FocusModal.Content>7</FocusModal>

API Reference#

FocusModal#

This component is based on the Radix UI Dialog primitives.

FocusModal.Trigger#

This component is used to create the trigger button that opens the modal. It accepts props from the Radix UI Dialog Trigger component.

FocusModal.Content#

This component wraps the content of the modal. It accepts props from the Radix UI Dialog Content component.

FocusModal.Header#

This component is used to wrap the header content of the modal. This component is based on the div element and supports all of its props

FocusModal.Body#

This component is used to wrap the body content of the modal. This component is based on the div element and supports all of its props

FocusModal.Footer#

This component is used to wrap the footer content of the modal. This component is based on the div element and supports all of its props

Examples#

Control Focus Modal Open State#

Using Form in Focus Modal#

Nested Focus Modals#

A focus modal can open another focus modal. These focus modals will be stacked on top of each other. You can nest as many focus modals as you want.