Modal

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

<Modal.Root>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>
    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Usage

import { Modal } from "@yamada-ui/react"

import { Modal } from "@/components/ui"

import { Modal } from "@workspaces/ui"

<Modal.Root>
  <Modal.OpenTrigger />
  <Modal.Overlay />
  <Modal.Content>
    <Modal.CloseButton />
    <Modal.Header>
      <Modal.Title />
    </Modal.Header>
    <Modal.Body />
    <Modal.Footer>
      <Modal.CloseTrigger />
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Use props

<Modal.Root
  body="青春とは嘘であり、悪である。青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。すべては彼らのご都合主義でしかない。結論を言おう。青春を楽しむ愚か者ども、砕け散れ。"
  cancel="とじる"
  success="砕け散る"
  title="作品冒頭"
  trigger={<Button>Open Modal</Button>}
  onCancel={(onClose) => onClose()}
  onSuccess={noop}
/>

Change Size

const [size, setSize] = useState<Modal.RootProps["size"]>("md")
const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <For each={["xs", "sm", "md", "lg", "xl", "cover", "full"] as const}>
        {(size) => (
          <Button
            key={size}
            onClick={() => {
              setSize(size)
              onOpen()
            }}
          >
            Open "{size}" Modal
          </Button>
        )}
      </For>
    </Wrap>

    <Modal.Root size={size} open={open} onClose={onClose}>
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>作品冒頭</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          青春とは嘘であり、悪である。
          青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
          すべては彼らのご都合主義でしかない。結論を言おう。
          青春を楽しむ愚か者ども、砕け散れ。
        </Modal.Body>

        <Modal.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>砕け散る</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  </>
)

Change Position

To change the display position, set placement to start-center, center-start, etc. By default, center-center is set.

const [placement, setPlacement] =
  useState<Modal.RootProps["placement"]>("center")
const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <For
        each={
          [
            "start-start",
            "start-center",
            "start-end",
            "center-start",
            "center-center",
            "center-end",
            "end-start",
            "end-center",
            "end-end",
          ] as const
        }
      >
        {(placement) => (
          <Button
            key={placement}
            onClick={() => {
              setPlacement(placement)
              onOpen()
            }}
          >
            Open "{placement}" Modal
          </Button>
        )}
      </For>
    </Wrap>

    <Modal.Root open={open} placement={placement} onClose={onClose}>
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>作品冒頭</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          青春とは嘘であり、悪である。
          青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
          すべては彼らのご都合主義でしかない。結論を言おう。
          青春を楽しむ愚か者ども、砕け散れ。
        </Modal.Body>

        <Modal.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>砕け散る</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  </>
)

Change Animation

To change the show or hide animation, set animation to "block-start", "inline-end", etc. By default, "scale" is set.

const [animationScheme, setAnimationScheme] =
  useState<Modal.RootProps["animationScheme"]>("scale")
const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <For
        each={
          [
            "scale",
            "block-start",
            "inline-start",
            "inline-end",
            "block-end",
          ] as const
        }
      >
        {(animationScheme) => (
          <Button
            key={animationScheme}
            onClick={() => {
              setAnimationScheme(animationScheme)
              onOpen()
            }}
          >
            Open "{animationScheme}" Modal
          </Button>
        )}
      </For>
    </Wrap>

    <Modal.Root animationScheme={animationScheme} open={open} onClose={onClose}>
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>作品冒頭</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          青春とは嘘であり、悪である。
          青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
          すべては彼らのご都合主義でしかない。結論を言おう。
          青春を楽しむ愚か者ども、砕け散れ。
        </Modal.Body>

        <Modal.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>砕け散る</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  </>
)

Change Duration

To change the duration, set duration to a numerical value (seconds).

<Modal.Root duration={0.4}>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Change Overflow Behavior

By default, "inside" is set, and scrolling only occurs within Modal.Body. If you set "outside", scrolling will occur within the Modal.Content.

const [scrollBehavior, setScrollBehavior] =
  useState<Modal.RootProps["scrollBehavior"]>("inside")
const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <For each={["inside", "outside"] as const}>
        {(scrollBehavior) => (
          <Button
            key={scrollBehavior}
            onClick={() => {
              setScrollBehavior(scrollBehavior)
              onOpen()
            }}
          >
            Open "{scrollBehavior}" Modal
          </Button>
        )}
      </For>
    </Wrap>

    <Modal.Root open={open} scrollBehavior={scrollBehavior} onClose={onClose}>
      <Modal.Content h="xl">
        <Modal.Header>
          <Modal.Title>作品冒頭</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <Text>青春とは嘘であり、悪である。</Text>
          <Text>
            青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。
          </Text>
          <Text>
            彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。
          </Text>
          <Text>
            彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。
          </Text>
          <Text>
            仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
          </Text>
          <Text>すべては彼らのご都合主義でしかない。結論を言おう。</Text>
          <Text>青春を楽しむ愚か者ども、砕け散れ。</Text>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>砕け散る</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  </>
)

By default, when the modal opens, it blocks the scroll of the main content to ensure accessibility. If you do not want to block the scroll of the main content, set blockScrollOnMount to false.

<Modal.Root blockScrollOnMount={false}>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Customize the Overlay

If you want to customize overlay, use Modal.Overlay.

<Modal.Root>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Overlay backdropFilter="blur(4px)" />

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Disable the Overlay

To disable (hide) the modal's overlay, set withOverlay to false.

<Modal.Root withOverlay={false}>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Customize the Close Button

If you want to customize close button, use Modal.CloseButton.

<Modal.Root>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.CloseButton colorScheme="warning" />

    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Disable the Close Button

To disable (hide) the modal's close button, set withCloseButton to false.

<Modal.Root withCloseButton={false}>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>
      <Button>砕け散る</Button>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Nested Modals

<Modal.Root>
  <Modal.OpenTrigger>
    <Button>Open Modal</Button>
  </Modal.OpenTrigger>

  <Modal.Content>
    <Modal.Header>
      <Modal.Title>作品冒頭</Modal.Title>
    </Modal.Header>

    <Modal.Body>
      青春とは嘘であり、悪である。
      青春をおう歌せし者達は常に自己と周囲を欺き自らを取り巻く環境のすべてを肯定的にとらえる。彼らは青春の２文字の前ならばどんな一般的な解釈も社会通念もねじ曲げてみせる。彼らにかかれば嘘も秘密も罪科も失敗さえも青春のスパイスでしかないのだ。仮に失敗することが青春の証しであるのなら友達作りに失敗した人間もまた青春のど真ん中でなければおかしいではないか。しかし彼らはそれを認めないだろう。
      すべては彼らのご都合主義でしかない。結論を言おう。
      青春を楽しむ愚か者ども、砕け散れ。
    </Modal.Body>

    <Modal.Footer>
      <Modal.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Modal.CloseTrigger>

      <Modal.Root size="xl">
        <Modal.OpenTrigger>
          <Button>作品詳細</Button>
        </Modal.OpenTrigger>

        <Modal.Content>
          <Modal.Header>
            <Modal.Title>やはり俺の青春ラブコメはまちがっている。</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <Text>青春は残酷だ！？ひねくれ男の妄言ラブコメ</Text>
            <Text>
              ――青春は嘘で欺瞞だ。リア充爆発しろ!
              ひねくれ者故に友達も彼女もいない高校生・八幡が生活指導の先生に連れてこられたのは、学園一の美少女・雪乃が所属する「奉仕部」だった――。
              さえない僕がひょんなことから美少女と出会ったはずなのに、どうしてもラブコメにならない残念どころか間違いだらけの青春模様が繰り広げられる。
              俺の青春、どうしてこうなった？
            </Text>
          </Modal.Body>

          <Modal.Footer>
            <Modal.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Modal.CloseTrigger>
          </Modal.Footer>
        </Modal.Content>
      </Modal.Root>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Props

Modal.Root

Prop	Default	Type / Description
`size`	`"md"`	`"2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "cover" \| "full" \| "lg" \| "md" \| "sm" ...` The size of the component.
`allowPinchZoom`	`false.`	`boolean` Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`blockScrollOnMount`	`true`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`body`	-	`ModalBodyProps \| ReactNode` The modal body to use.
`cancel`	-	`ButtonProps \| ReactNode` The modal cancel button to use.
`closeOnEsc`	`true`	`boolean` If `true`, the modal will close when the `Esc` key is pressed.
`closeOnOverlay`	`true`	`boolean` If `true`, the modal will close when the overlay is clicked.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`duration`	`0.2`	`MotionTransitionProps["duration"]` The animation duration.
`finalFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to return focus to when `FocusLock` unmounts.
`footer`	-	`ModalFooterProps \| ReactNode` The modal footer to use.
`header`	-	`ModalHeaderProps \| ReactNode` The modal header to use.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to receive focus initially.
`lockFocusAcrossFrames`	`false`	`boolean` Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe.
`middle`	-	`ButtonProps \| ReactNode` The modal middle button to use.
`onCancel`	-	`(onClose: () => void) => void` The callback invoked when cancel button clicked.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onCloseComplete`	-	`() => void` Callback function to run side effects after the modal has closed.
`onEsc`	-	`() => void` Callback invoked when the escape key is pressed and focus is within modal.
`onMiddle`	-	`(onClose: () => void) => void` The callback invoked when middle button clicked.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`onSuccess`	-	`(onClose: () => void) => void` The callback invoked when success button clicked.
`open`	-	`boolean` If `true`, the element will be opened.
`portalProps`	-	`Omit<PortalProps, "children">` Props to be forwarded to the portal component.
`restoreFocus`	`false`	`boolean` If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.
`success`	-	`ButtonProps \| ReactNode` The modal success button to use.
`title`	-	`ModalTitleProps \| ReactNode` The modal title to use.
`trigger`	-	`ReactNode` The modal trigger to use.
`withCloseButton`	`true`	`boolean` If `true`, display the modal close button.
`withOverlay`	`true`	`boolean` If `true`, display the modal overlay.

Modal.Body

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.CloseButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`icon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

Modal.CloseTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.Content

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.Footer

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.Header

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.OpenTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.Overlay

Prop	Default	Type / Description
`as`	-	`DOMElement` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Modal.Title

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The Modal follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

Key	Description	State
`Tab`	Focuses the next non-disabled element inside the modal. If on the last element, focuses the first non-disabled element.	`open={true}`
`Shift` + `Tab`	Focuses the previous non-disabled element inside the modal. If on the first element, focuses the last non-disabled element.	`open={true}`
`Escape`	Closes the modal.	`open={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Modal.Content`	`role="dialog"`	Indicates that this is a dialog.
	`aria-modal="true"`	Indicates that the displayed widget is modal.
	`aria-labelledby`	Sets to the `id` of `Modal.Title`.
	`aria-describedby`	Sets to the `id` of `Modal.Body`.
`Modal.OpenTrigger`	`aria-haspopup="dialog"`	Indicates that a dialog exists.
	`aria-expanded`	Sets to `"true"` if the modal is open, and `"false"` if it is closed.
	`aria-controls`	If the modal is open, sets to the `id` of `Modal.Content`.
	`aria-label`	Sets to `"Open modal"`.
`Modal.CloseButton`	`aria-label`	Sets to `"Close modal"`.
`Modal.CloseTrigger`	`aria-label`	Sets to `"Close modal"`.
`Modal.Overlay`	`aria-hidden`	Excludes the element from the accessibility tree.

Similar Components

Drawer is a component for a panel that appears from the edge of the screen.

Popover is a component that floats around an element to display information.

Tooltip is a component that displays short information, such as supplementary details for an element.

Collapse is a component that allows you to expand or collapse an element for display.

Fade is a component that gradually shows or hides an element.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

NativePopover is a component that floats around an element to display information using the HTML Popover API.

Slide is a component that shows or hides an element from the corners of the page.

Uses Components & Hooks

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

CloseButton is a component used primarily to trigger the close functionality of a component.

FocusLock is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Popover is a component that floats around an element to display information.

Portal is a component that renders elements outside of the current DOM hierarchy.

Fade is a component that gradually shows or hides an element.

useDisclosure is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as Modal, Dialog, Drawer, etc.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.