Develop

Styles

<div class="tng-backdrop"></div>
<button
  class="tng-icon-button on-contrast is-neutral | p-absolute at-top-right inset-lg"
  aria-label="Close"
>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

React

Imported from @tmedxp/dxp-headless-components as Overlay.

Properties

• Inherits all properties from the native <dialog> element.
• dialog — accepts the object returned by the useDialog hook.

Example

import { Overlay, useDialog } from '@tmedxp/dxp-headless-components';

const Foo = () => {
  const dialog = useDialog({
    id: 'overlay',
    isModal: true,
  });

  return (
    <>
      <button onClick={() => dialog.openOverlay()} />
      <Overlay dialog={dialog}>
        <iframe title="example" src="https://www.example.com" />
      </Overlay>
    </>
  );
};

export { Foo };