Skip to main content

Overlay

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/atomic/Overlay/Overlay.tsx (package @dtsl/react, exported as Overlay)

Note: This is the simple atomic Overlay (a background dimmer div toggled by isOpen). It is a different, unrelated component from the BaseOverlay primitive documented separately in base-overlay — don't conflate the two when writing real docs.

Props (verbatim from source)​

export interface OverlayProps {
	isOpen?: boolean
	className?: string
	children?: React.ReactNode
}

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. ModalDialog, Sidemodal, or Popover, which likely have their own overlay/backdrop handling).

Decision Logic​

TODO — needs UX/product input.

Accessibility​

TODO — needs UX/product input.

Common Mistakes​

TODO — needs UX/product input.