ModalReady

Modal component is used to display content that temporarily blocks interactions with the main view of an application. Modal should be used sparingly and only when necessary.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal id="modal" size="s" open aria-labelledby="title">
  <h2 slot="header" id="title">Modal title</h2>
  <p class="n-reset">Modal body text goes here.</p>

  <nord-button-group slot="footer" variant="spaced">
    <nord-button expand id="cancelButton">Cancel</nord-button>
    <nord-button expand id="confirmButton" variant="primary" autofocus>Save changes</nord-button>
  </nord-button-group>
</nord-modal>

<script>
  openButton.addEventListener("click", e => modal.showModal())
  cancelButton.addEventListener("click", () => modal.close())
  confirmButton.addEventListener("click", () => modal.close())
</script>

Properties

PropertyAttributeDescriptionTypeDefault
openopen

Controls whether the modal is open or not.

booleanfalse
sizesize

Controls the max-width of the modal when open.

"s" | "m" | "l" | "xl""m"
returnValue–

The reason why the modal was closed. This typically indicates which button the user pressed to close the modal, though any value can be supplied if the modal is programmatically closed.

string""
scrollablescrollable

By default if a modal is too big for the browser window, the entire modal will scroll. This setting changes that behavior so that the body of the modal scrolls instead, with the modal itself remaining fixed.

booleanfalse

Events

EventDescriptionType
close

Dispatched when a modal is closed for any reason.

NordEvent
cancel

Dispatched before the modal has closed when a user attempts to dismiss a modal. Call preventDefault() on the event to prevent the modal closing.

NordEvent

Slots

Slot nameDescription
Default slot

Default slot

header

Slot which holds the header of the modal, positioned next to the close button.

Methods

Method nameParametersDescription
showModal() => voidN/A

Show the modal, automatically moving focus to the modal or a child element with an autofocus attribute.

close(returnValue?: string) => voidreturnValue: An optional value to indicate why the modal was closed.

Programmatically close the modal.

focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.

Programmatically focus the modal.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-modal-padding-inline

Controls the padding on the sides of the modal, using our spacing tokens.

var(--n-space-m)
--n-modal-padding-block

Controls the padding above and below the modal, using our spacing tokens.

var(--n-space-m)
--n-modal-max-inline-size

Controls the width of the modal.

620px

Localization

This component requires localization in a multi-lingual application. The following keys are required when registering a translation:

KeyDescription
closeLabel

Accessible label for the close button.

For full localization guidelines, please see Localization documentation.

Localization Guidelines

Dependencies

This component is internally dependent on the following components:

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • Use for confirmations and conditional changes.
  • Use when the user is required to take an action.
  • Use when you need to display content that temporarily blocks interactions with the main view of an application.
  • Use when you need to ask a confirmation from a user before proceeding.
  • Use for important warnings, as a way to prevent or correct critical errors.

Don’t

  • Don’t use for nonessential information that is not related to the current userflow.
  • Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.
  • Don’t open a modal window on top of another modal.

Content guidelines

Modal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:

Edit patient
Edit the patient called John Doe
Discard changes?
Discard?
Delete patient?
Are you sure you want to delete this patent?

When writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

New appointment
New Appointment

Avoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:

Change theme
Change the theme

Avoid ending in punctuation:

Edit patient
Edit patient.

Focus behaviour

  • Use the autofocus attribute to set the initial focus to the first location that accepts user input.
  • If it is a transactional modal without form inputs, then autofocus should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.
  • If the modal contains a form, use autofocus in the first form field.
  • Focus remains trapped inside the modal dialog until it is closed.
  • For more examples and best practices, please see WAI-ARIA Authoring Practices Modal Dialog Example.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.