NordSecurity.Design

Modal

Overview

The Modal component is a component that displays content in a dialog box over the top of the page content. It is commonly used to display additional information or to request user action.

It shifts focus away from the main content by disabling the main content with a dark overlay.

When to use

  • To interrupt the flow of the user and point him to an action that is needed.
  • To provide very supplemental information without redirecting the user to a separate page

When not to use

  • For important error notifications, instead use an Alert.
  • For supplemental information that fits inside the content of the current page use Accordion

Anatomy

  1. Container
  2. Title
  3. Close icon button
  4. Content Slot
  5. Overlay

Variants & States

Actions

If you need to include actions or buttons inside your modal, make sure that they are always right aligned. The main action should be all the way to the right, while other actions of the group will follow on the left of it.

Internationalization

For RTL (right-to-left) languages there are no special adjustments made.

Properties

Name Type Values Description
width String "" Controls the width of the Modal
background String "" Controls the background color of the modal

Usage Guidelines

DoModals should be used sparingly and only when necessary.
DoUse when the user is required to take a needed action.
Don’tDon't include an action in the Modal that opens another Modal on top of the existing one.
Don’tOnly show the Modal with an essential action the user needs to take, after ensuring that the user has all the information he needs to make the correct choice.
Don’tDon't let the focus state be allowed to go outside of the modal (focus trapping)
Don’tTo interrupt the flow of the user and point him to an action that is needed.
Don’tTo provide very supplemental information without redirecting the user to a separate page
Don’tFor important error notifications, instead use an Alert.
Don’tFor supplemental information that fits inside the content of the current page use Accordion

Content Guidelines

We use modals for topics that are slightly out of scope for our apps. For example, they could serve as a bridge between the app and Help center, show release notes after an update, or act as a quick tool to act on malware notifications as they arise.

Modals should be dedicated to one topic at a time.

Voice and tone

  • Informative and actionable
  • Providing more context than a notification or an error would

Copy

Title

  • Short and concise
  • Pointing to the topic or issue in question

Body

  • Usually there’s an in-depth explanation under the title for more complex topics.
  • Additional components could be used in the copy (like buttons with feature controls, links, modals, QR codes).

Buttons

  • Short and explanatory
  • Oriented to a specific action (like “Open,” “Delete,” “Turn on”)

Accessibility

  • We clearly announce when a new pop-up or window opens so the user can understand that this is a separate element. That signals a different closing mechanism and browsing behavior (some modals block accessing anything other than the modal).
  • For larger modals covering different sections, make sure that elements under the same section have enough context to connect them together. If the context is lacking, try grouping titles with subtitles or titles with buttons to better explain where one section ends and another starts.
DoSupport center [button] Visit support center
Don’tSupport articles and our success team are always here to help you. [button] Support center
DoDiagnostic logs [button] Get logs
Don’tDiagnostic logs will help us investigate the issue you’re reporting. [button] Diagnostic logs