Modal

The <ContentModal /> is a modal dialog component that you can either use as is, or customise to your need. It is used for short and non-frequent tasks, such as viewing or submitting additional information, or to change aspects of the application.

Below is the most basic example of a content modal; passing only a text string to the header prop, and an object defining the button labels/actions to the controls prop, as well as children (also referred to as the modal body or modal content).

Show codeCopy code

In the same way you can pass anything to the modal body (as children), you can also customise the header and/or footer by passing in your own component.

NOTE: You cannot use the controls and footer props at the same time. Use the footer if you need a custom appearance or more complex functionality.

Show codeCopy code

Use the optional maxWidth prop to set the maximum width of the <ContentModal />. If no value is provided it defaults to 47.5rem. It also supports the responsive prop syntax.

The example below illustrates a use case where a modal stretching the full width of viewport is needed, so the maxWidth has been set to 100vw.

Show codeCopy code

The <AlertModal /> is used to display a message that the user needs to acknowledge or confirm. It accepts title, description and controls – along with other inherited props.

As a general rule, titles should be phrased as a short question so that the action is easy and clear to make. Descriptions should also be kept succinct and in as very few words, describe the changes or consequences being made to the system.

Alert modals should be used sparingly due to them requiring the user to make an action before they can return to the application.

Use the "confirm"-pattern when you need to confirm significant user decisions. Both the title and the primary button should reflect the action that will occur. The description should clearly describe the action being confirmed and explain any potential consequences that it may cause.

NOTE: Use critical tone on the confirm-control if the alert describes destructive or irreversible actions, e.g. where an action would result in significant data loss if done accidentally.

Show codeCopy code

Use the "acknowledge"-pattern when you need the user to acknowledge something important, such as a change in the system, or a new feature. They are provided with a single action to confirm that they have acknowledged the message.

Show codeCopy code

Use the controls prop – in both <ContentModal /> and <AlertModal /> – to define how to render the buttons in the modal and what should happen when they are triggered.

It accepts two keys; confirm and cancel(optional). The confirm key represents the primary action of the modal. The cancel key represents the secondary action (typically labelled "Cancel"), but is optional in case you don't need it, e.g. in an "Acknowledge alert modal".

Each key accepts another object in which you define the button's label and onClick, and optionally loading and tone.

NOTE: To ensure correct typing, import and declare ControlsProps as the type for your controls.

// import { ControlsProps } from '@eds/modal';

const onClickHandler = console.info;

const controls: ControlsProps = {
  confirm: { label: 'Yes, delete', onClick: onClickHandler, tone: 'critical' },
  cancel: { label: 'Cancel', onClick: onClickHandler, tone: 'ghost' },
};

The height of the content in the modal body (children) will make the modal's height grow until it hits the height of the viewport, after which it automatically make the overflowing content scrollable.

Show codeCopy code