Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

ModalNew

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
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 slot="footer" expand id="cancelButton">Cancel</nord-button>
  <nord-button slot="footer" expand id="confirmButton" variant="primary" autofocus>Save changes</nord-button>
</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""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 slotDefault slot
headerSlot which holds the header of the modal, positioned next to the close button.
footerSlot which is typically used to hold call to action buttons, but can also be used to build custom footers.

Methods

Method nameParametersDescription
showModal() => voidN/AShow 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

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

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization 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.