🔼Overlays

Overlay components appear on top of other content, typically to present focused information or actions. They include modals, tooltips, and sheets.

Available overlay components

• Modal - A centered dialog box for focused content

• Tooltip - Small contextual information popups

• Modal Background - The backdrop behind modals and sheets

• Sheets - Slide-in panels from the edges of the screen

Shared features

Overlay components typically share these behaviors:

• disclosure - A disclosure hook to control open/closed state

• closeOnOverlayClick - Close when clicking the background

• closeOnEscape - Close when pressing the Escape key

• lockScroll - Prevent background scrolling while open