Workspace/Components

Modal

A modal dialog that overlays and temporarily disables underlying content to provide information or ask for a decision from the user.

Overview

  • Release version
    Brazil
  • Available sinceNew York
  • A11Y WCAG 2.1 AA

This component is available for you to include in JavaScript code when creating custom components. It’s not included in UI Builder. Other modals are available in UI Builder under “Overlays” in the content tree.

Modal is a container component that appears on top of the main content, temporarily taking focus and requiring user interaction. It is commonly used to display additional information, gather user input, or present important messages without navigating to a new page.

ServiceNow link
Modal code documentation

UIB and developer guidance

Loading playground

When to use

Use modal when you need to draw attention to specific content, request user input, or display additional information without navigating away from the current context. It provides a focused interaction and is effective for tasks that require immediate attention or input.

When not to use

Don’t use modal for content that is more suitable on a separate page or when interrupting the workflow is unnecessary. Overusing modals can disrupt the user experience and make it challenging for users to maintain context within the application.

Subcomponents

See usage guidance for button

See usage guidance for tooltip

See usage guidance for popover

See usage guidance for alert

Variants

Learn about the attributes of modal.

For information about each type of button variant, review the button component usage guidelines.

Sizes

A modal is available in the following sizes: small (sm), medium (md), large (lg), full-screen, and custom. The small, medium, and large sizes have fixed widths as well as defined maximum and minimum heights. However, the full-screen modal size is relative to the size of the browser window. Custom size requires both the width and height to be specific.

Choose a size based on the layout of your display and the type of content you want to show.

Small

For the small size modal, the minimum height is 133px, maximum height is 315px, and width is fixed at 420px.

In this example, the notification uses the alert component because it doesn't need to interrupt the user's workflow.

Medium

For the medium size modal, the minimum height is 190px, maximum height is 450px, and width is fixed at 600px.

Large

For the large size modal, the minimum height is 254px, maximum height is 600px, and width is fixed at 800px.

Full-screen

In the full-screen size, the modal occupies the entire screen (except for the navigation bar).

Configurations

You can configure the content and buttons depending on your use case.

Behavior

Learn how modal behaves when the display changes or a user interacts with the component.

Responsive behaviors

Learn how modal responds to changes in a container or display.

Content focus

When the user opens a modal, a semi-transparent shade appears over the existing content to indicate that it's no longer interactive or accessible.

Overflow

If the modal content extends beyond the maximum height, a vertical scrollbar appears so that the user can scroll to see all the content.

Truncation

If the modal title is longer than the container, the text truncates with an ellipsis. A tooltip appears when hovering over the title so that the user can read the full title.

An example of how a truncated modal title appears.