Focus Modal

A modal component that spans the whole screen

Was this example helpful?

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.

PropTypeDefault
defaultOpen
boolean
-
open
boolean
-
onOpenChange
function
-
Was this helpful?

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

Example: Control Open State#


Code
1import { useState } from "react"2
3const MyModal = () => {4  const [open, setOpen] = useState(false)5
6  return (7    <FocusModal 8      open={open} 9      onOpenChange={setOpen}10    >11      <FocusModal.Trigger>Trigger</FocusModal.Trigger>12      <FocusModal.Content>13        <FocusModal.Header>Title</FocusModal.Header>14        <FocusModal.Body>Content</FocusModal.Body>15      </FocusModal.Content>16    </FocusModal>17  )18}
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break