Skip to content

Modal / Drawer

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

Modal with header, text and close button (spacing suggestions in blue and pink)
Modal with header, text, buttons and close button

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, which 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);
}
/* Change the Modal fullscreen height calculation */
:root {
/* Defaults to 0 */
--modal-height-offset: 3rem;
}

Styles and dnb-core-style

The Modal component comes with the dnb-core-style class predefined by default. If you don't want this behavior because of e.g. CSS specificity, you can opt out by setting this property prevent_core_style="true".

/* The CSS class is set by default */
<Modal className="dnb-core-style">...</Modal>
/* You have the option to set it like this as well */
<body>
<div id="app" />
<div id="dnb-modal-root" class="dnb-core-style" />
</body>

Demos

Triggered by a icon button

Drawer mode

With placement on the left side.

Fullscreen Modal, triggered by a tertiary button

Hide the Close Button and Prevent Close for 1sec

Triggered by custom trigger button

Close Modal by handlers