Focus Modal

A modal component that spans the whole screen

Was this example helpful?

Usage

import { FocusModal } from "@medusajs/ui"

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 section 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

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}