Modal

A modal dialog that renders on top of the page with a backdrop.

Open modal

import { Modal } from '@ontoui/react';

<Modal.Root>
  <Modal.Trigger>Open modal</Modal.Trigger>
  <Modal.Panel>
    <Modal.Title>Title</Modal.Title>
    <Modal.Description>Description</Modal.Description>
    <Modal.Close>Close</Modal.Close>
  </Modal.Panel>
</Modal.Root>;

Anatomy

The Modal compound component is made up of the following parts:

Part	Description
Modal.Root	Root context provider. Manages open state.
Modal.Trigger	Button that opens the modal.
Modal.Panel	The modal window. Renders into a portal with a backdrop. Receives focus when opened.
Modal.Title	Accessible heading that labels the dialog.
Modal.Description	Supporting text associated with the dialog.
Modal.Close	Button that closes the modal.

API Reference

Modal.Root

Prop	Type	Default
children?	ReactNode	—
open?	boolean	—
onOpenChange?	(open: boolean) => void	—

Modal.Trigger

Prop	Type	Default
children?	ReactNode	—
render?	ReactElement<unknown, string | JSXElementConstructor<any>>	<Button />

Modal.Panel

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Modal.Title

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Modal.Description

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Modal.Close

Prop	Type	Default
children?	ReactNode	—
className?	string	—
render?	ReactElement<unknown, string | JSXElementConstructor<any>>	<Button variant="secondary" />
ref?	Ref<HTMLDivElement>	—