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.