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.

Prop	Type	Default
`defaultOpen`	`boolean`	-
`open`	`boolean`	-
`onOpenChange`	`function`	-

Was this page helpful?

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}