1. Components
  2. Overlays
  3. Modal

Modal

A modal is an overlay element which blocks interaction with elements outside it.

Aria docsReport an issueEdit this page
<DialogRoot>
  <Button>Open modal</Button>
  <Modal>
    <DialogContent>modal content</DialogContent>
  </Modal>
</DialogRoot>

Installation

npx dotui-cli@latest add modal

API Reference

PropTypeDefaultDescription
isOpenboolean-Whether the overlay is open by default (controlled).
defaultOpenboolean-Whether the overlay is open by default (uncontrolled).
isDismissablebooleanfalseWhether to close the modal when the user interacts outside it.
UNSTABLE_portalContainerElementdocument.bodyThe container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
isKeyboardDismissDisabledbooleanfalseWhether pressing the escape key to close the dialog should be disabled.
shouldCloseOnInteractOutside(element: Element) => boolean-When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
childrenReactNode | (opts: ModalRenderProps) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring | (values: ModalRenderProps & {defaultClassName: string | undefined}) => string-The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties | (values: ModalRenderProps & {defaultStyle: CSSProperties}) => CSSProperties | undefined-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onOpenChange(isOpen: boolean) => voidHandler that is called when the overlay's open state changes.
BreadcrumbsPopover
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.