Modal

Description

A Modal is a focused container that appears above the page to display essential, interruptive, or task-related content without navigating away from the current view. It temporarily disables interaction with the underlying interface and requires the user to complete an action before returning to the previous context.

When to use it (and when not to):

• Use when:
  • The user must take an action before continuing (e.g. confirm, acknowledge, complete a task).
  • You need to display content that requires full focus without distractions.
  • The interaction must not be missed (e.g. legal notices, blocking states).
• Avoid when:
  • The information is optional, lightweight, or can be shown inline or via a Popover/Tooltip.
  • The interruption breaks the user flow unnecessarily.
  • A non-blocking alternative (sheet, inline block, banner) would provide a smoother experience.

Modal can be framed (optional):

• Image (optional, 16:9 or 9:16): An optional image can be placed at the left of the Modal. Recommended ratio: 16:9 or 9:16, sourced from the Image component to maintain consistency and responsive behaviour. Optional short text may be placed over the image when required by the content. For more details, refer to the Image component.

• Content Slot (mandatory): The content slot is flexible and can hold different types of content such as text, images or simple forms. It does not impose its own copy rules. Any element placed inside the slot must follow the guidelines of its own component (for example Button Main, Link, Image or Form elements). The modal only provides the container and overall behaviour.

Component

Properties

ModalProperties extends <PropsWithChildren<Omit<ComponentProps<'dialog'>, 'open'>>> which means it includes all standard HTML attributes that can be applied to a dialog element. It excludes the ‘open’ property to force container to be opened ans closed through the modal instance and not through the dialog open property itself.

Prop	Type	Description	Optional
instance	ModalInstance	The modal instance used to open / close container and to get a reference to the html element	❌
position	ModalPosition	Position can be 'ABSOLUTE' | 'FIXED' | 'RELATIVE', 'ABSOLUTE' by default	✅
placement	ModalPlacement	Placement can be 'CENTER' | 'GOLDENRATION' | 'BOTTOM' | 'TOP' | 'LEFT' | 'RIGHT' | 'TOPRIGHT' | 'BOTTOMRIGHT' | 'BOTTOMLEFT' | 'TOPLEFT', 'MAXIMUM' by default	✅
labels	ModalLabels	Collection of labels used by the modal	❌
frameContent	React.ReactElement	Content of tng-frame container if modal is 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={placement.CENTER}
                labels={{ Close: 'Close overlay' }}
            >
                <p class="tng-text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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={placement.CENTER}
                labels={{ Close: 'Close overlay' }}
                frameContent={frameContent}
            >
                <p class="tng-text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </Modal>;
};

export { ModalExample };

Storybook

https://stunning-adventure-o796gr1.pages.github.io/react-components/?path=/docs/react-components-components-modal—docs

Try the Modal component in storybook:

Figma

https://www.figma.com/design/BMP7JhfVGX3h47BvUD0xXj/03-Components?node-id=7545-11630