Modal

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

Import

import {
  Modal,
  ModalOverlay,
  ModalCloseButton,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from "@yamada-ui/react"

Copied!

Modal: A wrapper component that controls the state of the modal.
ModalOverlay: The component for the overlay that exists behind the modal.
ModalCloseButton: The component for the button that closes the modal.
ModalHeader: The component that displays the modal's header.
ModalBody: The component that displays the main content of the modal.
ModalFooter: The component that displays the modal's footer.

ModalOverlay and ModalCloseButton can be omitted.

Usage

To control the display or hide, set isOpen and onClose.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Change Size

Editable example

const sizeMap = [
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "2xl",
  "3xl",
  "4xl",
  "5xl",
  "6xl",
  "full",
]
const [size, setSize] = useState("md")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {sizeMap.map((size) => (
        <Button
          key={size}
          onClick={() => {
            setSize(size)
            onOpen()
          }}
        >
          Open {size} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} size={size}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Change Position

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

Editable example

const placementMap = [
  "center",
  "top",
  "right",
  "bottom",
  "left",
  "top-left",
  "top-right",
  "bottom-left",
  "bottom-right",
]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {placementMap.map((placement) => (
        <Button
          key={placement}
          onClick={() => {
            setPlacement(placement)
            onOpen()
          }}
        >
          Open {placement} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} placement={placement}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Change Animation

To change the show or hide animation, set animation to top, left, etc. By default, scale is set.

Editable example

const animationMap = ["scale", "top", "left", "bottom", "right"]
const [animation, setAnimation] = useState("scale")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {animationMap.map((animation) => (
        <Button
          key={animation}
          onClick={() => {
            setAnimation(animation)
            onOpen()
          }}
        >
          Open {animation} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} animation={animation}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Change Duration

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

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} duration={0.4}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Change Overflow Behavior

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

Editable example

const [scrollBehavior, setScrollBehavior] = useState("inside")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <Button
        onClick={() => {
          setScrollBehavior("inside")
          onOpen()
        }}
      >
        Open inside scroll Modal
      </Button>
      <Button
        onClick={() => {
          setScrollBehavior("outside")
          onOpen()
        }}
      >
        Open outside scroll Modal
      </Button>
    </Wrap>

    <Modal
      isOpen={isOpen}
      onClose={onClose}
      scrollBehavior={scrollBehavior}
      h="xl"
    >
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        <Text>
          『ドラゴンボール』（DRAGON
          BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
        </Text>

        <Text>
          1986年から1996年までフジテレビ系列で『ドラゴンボール』、『ドラゴンボールZ』が放送され、11年間のシリーズ放送期間中、平均視聴率20%以上を記録した。また、全世界80か国以上で放送されるなど、世界中で絶大な人気を誇る、日本の漫画・アニメを代表する作品である。
          連載終了後もテレビアニメ・映画・ゲームなどが展開しており、映画『ドラゴンボール超
          ブロリー』が全世界興行収入135億円を記録し、各国で大ヒットした。
        </Text>

        <Text>
          1991年に『週刊少年ジャンプ21・22合併号』で行われた読者アンケートでは、同誌のアンケート史上最大得票となる1000通中815票を獲得し、1995年3・4合併号（1994年12月発売）で同誌の発行部数は653万部を記録。本作の連載終了後は同誌の部数が急速に減少していくなど、連載作品の中でも特に影響は大きかった。
        </Text>

        <Text>
          単行本の発行部数は完全版（2000万部）を含み国内で1億6000万部以上、全世界累計で2億6000万部を記録。
        </Text>

        <Text>
          ゲームソフトは現在までにミリオンセラーを10本以上輩出し、シリーズ累計販売本数は全世界5000万本に達する。『スーパードラゴンボールヒーローズ』はカード累計出荷枚数10億枚、登録ユーザー数は400万人を突破し、デジタルキッズカードゲーム市場でNo.1の人気タイトルである。
        </Text>

        <Text>
          2019年時点で、漫画・アニメシリーズ・ゲーム作品などを含めた総売上は230億ドル（約2兆5000億円）に達する。
        </Text>
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

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.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} blockScrollOnMount={false}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Customize the Overlay

If you want to customize ModalOverlay by passing props, etc., set it without omitting.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Disable the Overlay

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

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} withOverlay={false}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Customize the Close Button

If you want to customize ModalCloseButton by passing props, etc., set it without omitting.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalCloseButton color="red.500" />

      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Disable the Close Button

If onClose is not set, the close button will be disabled (hidden).

By default, clicking on the overlay will close the modal. Please note that if onClose is not set, the action of closing by clicking the overlay will also be disabled.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

Nested Modals

Editable example

const firstControls = useDisclosure()
const secondControls = useDisclosure()

return (
  <>
    <Button onClick={firstControls.onOpen}>Open Modal</Button>

    <Modal isOpen={firstControls.isOpen} onClose={firstControls.onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={firstControls.onClose}>
          とじる
        </Button>
        <Button colorScheme="primary" onClick={secondControls.onOpen}>
          あらすじ
        </Button>
      </ModalFooter>

      <Modal
        isOpen={secondControls.isOpen}
        onClose={secondControls.onClose}
        size="sm"
      >
        <ModalHeader>あらすじ</ModalHeader>

        <ModalBody>
          地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。
        </ModalBody>

        <ModalFooter>
          <Button variant="ghost" onClick={secondControls.onClose}>
            とじる
          </Button>
          <Button colorScheme="primary">Wikipedia</Button>
        </ModalFooter>
      </Modal>
    </Modal>
  </>
)

Copied!

Edit this page on GitHub

PreviousOverlay NextDialog

Modal

Usage

Change Size

Change Position

Change Animation

Change Duration

Change Overflow Behavior

Do Not Block Scroll When Modal Opens

Customize the Overlay

Disable the Overlay

Customize the Close Button

Disable the Close Button

Nested Modals