Modal

Modal is a child window that overlays the main parent window.

Overview

Modal creates a new context that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application.

Modal HeaderCancelConfirmThe Modal Component.

Usage

The Modal should be used to control application flow for a user. By opening a modal window for the user, you can focus their attention to whatever you need them to action on. This could be anything from entering data to managing settings. If you require to explicitly message the user (either to confirm an action or present information that the user must acknowledge) then use the Dialog component instead. Unlike the Dialog component, the Modal can be closed by clicking the cross situated in the header of the component.

CancelAdd SubscriberCharliFirst Namecharli.roberts@mod.gov.ukEmailRobertsLast Name11 / 09 / 19Start Date0778 9548 372Contact Number@charliSlack Username£4SubscriptionPersonal InformationEnter the Subscriber’s name and contact information.Subscription DetailsManage the size and frequency of the Subscriber’s payments.Bi-weeklyMonthlyDailyWeeklyDirect DebitPayment TypeCombining Forms with Modals.

Modals can be combined with Forms to create flows that capture the user's attention.

Anatomy

Modal HeaderCancelConfirmContainerModal Header13Modal Window2The Dialog Anatomy.Modal Footer4
  1. Container. This wraps the entire component, adding a z-index to ensure the Modal stacks above the entire app. This Container also serves as a backdrop that covers the application with a dark, transparent background. This draws focus to the main Modal Window.
  2. Modal Window. This is the main focus of the Modal component. Add content here to inform the user or ask them to perform an action.
  3. Modal header. Provides a space for a Modal title and close button.
  4. Modal Footer. Provides a Action or Danger button. Can also house an optional Cancel button.

States

The Modal component has two states - hidden and active. By default, including the Modal component in an application page won't render it. Triggering the component will cause it to fade in, over all application content.

Hierarchy & Placement

As the Modal is a full-screen component, only one can be used at any time. The Modal auto-positions itself to the centre of the screen and will adjust itself based on the content provided. There is no need to manually size or place the Modal.

Modal is a child window that overlays the main parent window.

Basic Usage

Modal Header
This is an example Modal.
<Modal
  title="Modal Header"
  primaryButton={primaryButton}
  secondaryButton={secondaryButton}
  tertiaryButton={tertiaryButton}
  onClose={() => console.log('close')}
  isOpen
>
  This is an example modal.
</Modal>

Modal Properties

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCustom CSS class to add to the component
childrenReact.ReactNodeFalsen/aContent of the modal
isOpenbooleanFalsen/aAn attribute denoting the open / close state of the modal
onCloseFunction<any>Falsen/aA callback function invoked when the modal is closed
primaryButtonButtonPropsFalsen/aA collection of props specifying the look and behaviour of the primary button
secondaryButtonButtonPropsFalsen/aA collection of props specifying the look and behaviour of the secondary button
tertiaryButtonButtonPropsFalsen/aA collection of props specifying the look and behaviour of the tertiary button
titlestringFalsen/aThe title to display at the top of the modal