Focus Modal

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

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}