Overlay component is a web component that displays a overlay on top of the content.

An overlay is a bit hard to demonstate in a static example, but here is a simple example of how to use it. By default the overlay is not visible, but you can set the open attribute to true to make it visible.

<>
<dap-ds-button onClick={
  () => {
    const overlay = document.querySelector('dap-ds-overlay');
    overlay.open = !overlay.open;
  }
}>Open Overlay</dap-ds-button>
<dap-ds-overlay onClick={
  () => {
    const overlay = document.querySelector('dap-ds-overlay');
    overlay.open = !overlay.open;
  }
}></dap-ds-overlay>
</>

import { DapDSOverlay } from 'dap-design-system/dist/dds'

import { DapDSOverlayReact } from 'dap-design-system/dist/react'

No slots available.

No custom events available.

No CSS parts available.