1. Components
  2. Overlays
  3. Overlay

Overlay

An overlay is an element which blocks interaction with elements outside it. it could be a modal, a drawer or a popover

Report an issueEdit this page
<DialogRoot>
  <Button>Open overlay</Button>
  <Overlay>
    <DialogContent>some content</DialogContent>
  </Overlay>
</DialogRoot>

Installation

npx dotui-cli@latest add overlay

Overlay type

Overlay can be rendered as modal, popover, or drawer using the type prop. You can set a different type for mobile view with the mobileType prop.

Type
Mobile type
<DialogRoot>
  <Button>Create issue</Button>
  <Overlay type={type} mobileType={mobileType}>
    <DialogContent>
      {/* Dialog content */}
    </DialogContent>
  </Overlay>
</DialogRoot>

API Reference

PropTypeDefaultDescription
type'modal' |'drawer' |'popover' |'modal'The type of the overlay.
mobileType'modal' |'drawer' |'popover' |'drawer'The mobile type of the overlay.
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.
modalPropsModalProps-Props applied to the Modal element. See ModalProps
drawerPropsDrawerProps-Props applied to the Drawer element. See DrawerProps
popoverPropsPopoverProps-Props applied to the Popover element. See PopoverProps
EventTypeDescription
onOpenChange(isOpen: boolean) => voidHandler that is called when the overlay's open state changes.
DrawerDialog
dotUI

Bringing singularity to the web.

Community

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