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

This component is based on the div element and supports all of its props

FocusModal.Body

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}