Modal

Description

NB! Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.

Behavior

The modal can be triggered from either a button or by using the open_state property. Triggering a modal will activate the opaque overlay and display the contents.

Structure and content

Typically an opaque cover over the main content (fullscreen) and a small centered box containing information and interactive elements (buttons, forms etc.)

What is it

Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. The main content is disabled until the user interacts with the modal dialog.

Disadvantages of modal Dialogs

They require immediate attention
They interrupt users
They cause users to forget what they were doing
They add extra goals - reading, interacting and closing the Modal
They block the content in the background

Guidelines

Use for important warnings as a way to prevent or correct critical errors.
Do not use for unessential information that is not related to the users current workflow.
Use for requesting the user to enter information critical to the current process.

Design Patterns

My alt — Modal with header, text and close button (spacing suggestions in blue and pink)

Root Element

NB: If the wrapper is not set manually, a wrapper is inserted automatically as a child node to the body.

To make sure the HTML structure is decoupled from all the page content, You can optionally define a wrapper div like <div class="dnb-modal-root" />.

Just place this as a sibling of Your App root HTML element. This ensures that we always can stack the modal content above the App Content.

<body>
  <div id="app" />
  <div id="dnb-modal-root" />
</body>

Z-index

The Modal component is using 3000 as the z-index.

:root {
  --modal-z-index: 3000;
}

Sizing and spacing

You have the properties min_width and max_width. But by using these, the width styles get injected inline, witch normal circumstances works fine. But in case you want to set it by CSS, you can do so:

/* Change the Modal size  */
.dnb-modal__content__inner {
  min-width: 20vw;
  max-width: 40rem;
}
/* Change the Modal spacing  */
:root {
  /* Defaults to --spacing-large */
  --modal-spacing: var(--spacing-small);
}

Styles and `dnb-core-style`

In case you don't use the CSS package dnb-ui-core - you have to make sure you assign the HTML class dnb-core-style:

/* Either to the Modal */
<Modal className="dnb-core-style">...</Modal>
/* - or to the root element */
<body>
  <div id="app" />
  <div id="dnb-modal-root" class="dnb-core-style" />
</body>

Demos

Triggered by a icon button

<Modal
  title="Modal Title"
  trigger_title="Click me"
  modal_content={() => (
    <div className="dnb-section dnb-section--spacing dnb-section--mint-green">
      <p className="dnb-p">
        This is the modal text. Triggered by a icon button.
      </p>
    </div>
  )}
  className="dnb-core-style"
/>

<Modal
  title="Modal Title"
  trigger_title="Click me"
  modal_content={() => (
    <div className="dnb-section dnb-section--spacing dnb-section--mint-green">
      <p className="dnb-p">
        This is the modal text. Triggered by a icon button.
      </p>
    </div>
  )}
  className="dnb-core-style"
/>

Fullscreen Modal, triggered by a tertiary button

<Modal
  title="Modal Title"
  fullscreen="true"
  trigger_variant="tertiary"
  trigger_text="Click me"
  modal_content="This is the modal text. Triggered by a tertiary button."
  className="dnb-core-style"
/>

<Modal
  title="Modal Title"
  fullscreen="true"
  trigger_variant="tertiary"
  trigger_text="Click me"
  modal_content="This is the modal text. Triggered by a tertiary button."
  className="dnb-core-style"
/>

Hide the Close Button and Prevent Close for 1sec

<Modal
  title="1s close delay"
  trigger_text="Click me"
  prevent_close="true"
  hide_close_button="true"
  on_open={(e) => console.log('on_open', e)}
  on_close={(e) => console.log('on_close', e)}
  on_close_prevent={({ close }) => setTimeout(close, 1e3)}
  className="dnb-core-style"
>
  <p className="dnb-p">
    This is a Modal Window with no close button.
  </p>
  <p className="dnb-p">
    Click outside me, and I will be closed within 1 second.
  </p>
  <div className="dnb-section dnb-section--spacing dnb-section--divider">
    <Input label="Focus:">Focus me with Tab key</Input>
  </div>
</Modal>

<Modal
  title="1s close delay"
  trigger_text="Click me"
  prevent_close="true"
  hide_close_button="true"
  on_open={(e) => console.log('on_open', e)}
  on_close={(e) => console.log('on_close', e)}
  on_close_prevent={({ close }) => setTimeout(close, 1e3)}
  className="dnb-core-style"
>
  <p className="dnb-p">
    This is a Modal Window with no close button.
  </p>
  <p className="dnb-p">
    Click outside me, and I will be closed within 1 second.
  </p>
  <div className="dnb-section dnb-section--spacing dnb-section--divider">
    <Input label="Focus:">Focus me with Tab key</Input>
  </div>
</Modal>

Triggered by custom trigger button

<Button
  id="custom-triggerer"
  text="Custom trigger Button"
  on_click={() => (
    <Modal
      title="Modal Title"
      trigger_hidden="true"
      open_state="opened"
      labelled_by="custom-triggerer"
      className="dnb-core-style"
    >
      <div className="dnb-section dnb-section--spacing dnb-section--divider">
        <p className="dnb-p">
          This Modal was opened by a custom trigger button.
        </p>
      </div>
    </Modal>
  )}
/>

<Button
  id="custom-triggerer"
  text="Custom trigger Button"
  on_click={() => (
    <Modal
      title="Modal Title"
      trigger_hidden="true"
      open_state="opened"
      labelled_by="custom-triggerer"
      className="dnb-core-style"
    >
      <div className="dnb-section dnb-section--spacing dnb-section--divider">
        <p className="dnb-p">
          This Modal was opened by a custom trigger button.
        </p>
      </div>
    </Modal>
  )}
/>

Close Modal by handlers

<Modal
  title="Auto close"
  trigger_text="Click me"
  // open_state="opened"
  close_modal={close => {
    setTimeout(close, 3e3)
  }}
  className="dnb-core-style"
>
  <div className="dnb-section dnb-section--spacing dnb-section--signal-orange">
    <p className="dnb-p">
      This Modal will close in 3 seconds.
    </p>
  </div>
</Modal>

<Modal
  title="Auto close"
  trigger_text="Click me"
  // open_state="opened"
  close_modal={close => {
    setTimeout(close, 3e3)
  }}
  className="dnb-core-style"
>
  <div className="dnb-section dnb-section--spacing dnb-section--signal-orange">
    <p className="dnb-p">
      This Modal will close in 3 seconds.
    </p>
  </div>
</Modal>

#Modal

#Description

#Behavior

#Structure and content

#What is it

#Disadvantages of modal Dialogs

#Guidelines

#Design Patterns

#Root Element

#Z-index

#Sizing and spacing

#Styles and dnb-core-style

#Demos