Develop

Styles

A modal is an overlay dialog that focuses the user’s attention on a specific task or content.

<div class="tng-modal">
  <div class="tng-modal-panel">
    <button class="tng-button is-tertiary is-ghost">
      <span>Close</span>
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <div class="tng-modal-content">
      <div class="tng-slot is-primary"></div>
    </div>
  </div>
</div>

Close

Note

When .tng-modal is used on a <dialog> element, it will automatically apply the tng-backdrop background. No need to create this element yourself!

Fullscreen

You can use the positioning utilities to create a fullscreen modal.

<div class="tng-modal | p-absolute at-maximum">
  <div class="tng-modal-panel">
    <button class="tng-button is-tertiary is-ghost">
      <span>Close</span>
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <div class="tng-modal-content">
      <div class="tng-slot is-primary"></div>
    </div>
  </div>
</div>

Close

With Scroll

When a modal contains potentially more content than fits in the viewport, you can use the overflow utility to make the content area scrollable.

<div class="tng-modal" style="max-block-size: 300px">
  <div class="tng-modal-panel">
    <button class="tng-button is-tertiary is-ghost">
      Close
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <div class="tng-overflow-scroll is-block">
      <div class="tng-modal-content">
        <p class="tng-text-body">…</p>
        <p class="tng-text-body">…</p>
      </div>
    </div>
  </div>
</div>

Close

Ea reprehenderit qui mollit. Magna quis veniam ea est deserunt labore eu ullamco ea ex cupidatat ullamco exercitation esse. Anim amet mollit qui mollit reprehenderit nisi commodo occaecat. Laboris esse ex amet consequat proident officia id velit cupidatat nostrud deserunt ipsum proident. Enim exercitation qui sunt.

Ea reprehenderit qui mollit. Magna quis veniam ea est deserunt labore eu ullamco ea ex cupidatat ullamco exercitation esse. Anim amet mollit qui mollit reprehenderit nisi commodo occaecat. Laboris esse ex amet consequat proident officia id velit cupidatat nostrud deserunt ipsum proident. Enim exercitation qui sunt.

With Image

<div class="tng-modal">
  <div class="tng-frame">
    <div class="tng-slot"></div>
  </div>
  <div class="tng-modal-panel">
    <button class="tng-button is-tertiary is-ghost">
      Close
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <div class="tng-modal-content">
      <div class="tng-slot is-primary"></div>
    </div>
  </div>
</div>

Close

Recipes

Modal Dialog

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Open Dialog

Close

Modal Title

Tertiary Secondary Primary

Tertiary Secondary Primary

source code

React

Import the Modal component from @tmedxp/react-components.

Properties

ModalProperties extends <PropsWithChildren<Omit<ComponentProps<'dialog'>, 'open'>>>.

Prop	Type	Description	Optional
instance	ModalInstance	The modal instance used to open / close	❌
position	ModalPosition	Position: 'ABSOLUTE' | 'FIXED' | 'RELATIVE'	✅
placement	ModalPlacement	Placement: centered, top, bottom, etc.	✅
labels	ModalLabels	Collection of labels used by the modal	❌
frameContent	React.ReactElement	Content of tng-frame container if framed	✅

Example without frame

import {
  Modal,
  ModalPlacement,
  ModalPosition,
  useModalInstance,
  Button,
} from '@tmedxp/react-components';

const modalInstance = useModalInstance();
const ModalExample = () => {
  return (
    <>
      <Button
        buttonType="button"
        buttonSize="md"
        buttonStyle="primary"
        onClick={modalInstance.open}
        text="Open modal overlay"
      />
      <Modal
        instance={modalInstance}
        position={ModalPosition.ABSOLUTE}
        placement={ModalPlacement.CENTER}
        labels={{ Close: 'Close overlay' }}
      >
        <p class="tng-text-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </Modal>
    </>
  );
};

export { ModalExample };

Example with frame

import {
  Modal,
  ModalPlacement,
  ModalPosition,
  useModalInstance,
  Button,
} from '@tmedxp/react-components';

const modalInstance = useModalInstance();
const frameContent = <div className="tng-slot"></div>;
const ModalExample = () => {
  return (
    <>
      <Button
        buttonType="button"
        buttonSize="md"
        buttonStyle="primary"
        onClick={modalInstance.open}
        text="Open framed modal overlay"
      />
      <Modal
        instance={modalInstance}
        position={ModalPosition.ABSOLUTE}
        placement={ModalPlacement.CENTER}
        labels={{ Close: 'Close overlay' }}
        frameContent={frameContent}
      >
        <p class="tng-text-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </Modal>
    </>
  );
};

export { ModalExample };

useDialog hook

Pairs with Modal (and with Backdrop’s Overlay) to manage open/close state.

Properties

• id — a string referencing the dialog.
• isModal — true to show as a modal.
• onSubmit — invoked when the dialog is closing.

Returned API

• reference — the dialog’s DOM reference.
• properties — the dialog’s properties.
• softClose() — close the dialog.
• openOverlay() — open the dialog.

Example

const dialog = useDialog({
  id: 'overlay',
  isModal: true,
  onSubmit: () => alert('The dialog has been closed'),
});

dialog.openOverlay();

dialog.softClose();