---
title: Modal
description: "`Modal`は、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。"
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>
```

## 使い方

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

### propsを使う

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

### サイズを変更する

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

### 位置を変更する

表示位置を変更する場合は、`placement`に`"start-center"`や`"center-start"`などを設定します。デフォルトでは、`"center-center"`が設定されています。

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

### アニメーションを変更する

表示または非表示のアニメーションを変更する場合は、`animation`に`"block-start"`や`"inline-end"`などを設定します。デフォルトでは、`"scale"`が設定されています。

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

### 所要時間を変更する

所要時間を変更する場合は、`duration`に数値(秒)を設定します。

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

### オーバーフローの動作を変更する

デフォルトでは、`"inside"`が設定されており、スクロールは`Modal.Body`内でのみ発生します。`"outside"`を設定すると、`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>
  </>
)
```

### モーダルを開いたときにスクロールをブロックしない

デフォルトでは、モーダルを開いた際に主要なコンテンツのスクロールをブロックしています。これは、アクセシビリティを確保するためです。もし、主要なコンテンツのスクロールをブロックしたくない場合は、`blockScrollOnMount`を`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>
```

### オーバーレイをカスタマイズする

オーバーレイをカスタマイズする場合は、`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>
```

### オーバーレイを無効にする

モーダルのオーバーレイを無効(非表示)にする場合は、`withOverlay`を`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>
```

### 閉じるボタンをカスタマイズする

閉じるボタンをカスタマイズする場合は、`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>
```

### 閉じるボタンを無効にする

モーダルの閉じるボタンを無効(非表示)にする場合は、`withCloseButton`を`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>
```

### ネストしたモーダル

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

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。