---
title: Modal
description: "`Modal` is a component that is displayed over the main content to focus the user's attention solely on the information."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/modal/modal.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/modal
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-modal--basic
---

```tsx
<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

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

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

```tsx
import { Modal } from "@workspaces/ui"
```

```tsx
<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

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

### Change Size

```tsx
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.

```tsx
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.

```tsx
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).

```tsx
<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`.

```tsx
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>
  </>
)
```

### Do Not Block Scroll When Modal Opens

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

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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

```tsx
<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.                                                                                                                                        |
| `placement`             | `"center"` | `"center-center" \| "center-end" \| "center-start" \| "center" \| "end-center" \| "end-end" \| "end-start" \| "start-center" \| "start-end" \| "start-start" ...` | The placement of the modal.                                                                                                                                                   |
| `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.                                                                             |
| `scrollBehavior`        | `"inside"` | `"inside" \| "outside"`                                                                                                                                           | Where scroll behavior should originate. - `inside`: scroll only occurs within the `ModalBody`. - `outside`: the entire `ModalContent` will scroll within the viewport.        |
| `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.            |
| `fullRounded`   | `false`    | `boolean`                                                                                                                                                    | If `true`, the button is full rounded. Else, it'll be slightly round. |
| `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

Currently, this section is being updated due to the migration of v2.