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.
<nord-modalid="modal"size="s"openaria-labelledby="title"> <h2slot="header"id="title">Discard changes?</h2> <pclass="n-reset">All information you have entered will be deleted.</p>
<divclass="n-reset n-typeset"> <h2id="title">Lorem ipsum dolor sit</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos deleniti nemo sequi voluptates fugit id, facere velit? Possimus, nobis sit. </p> <p>Modi, beatae debitis suscipit fugit et obcaecati vitae laudantium.</p> <p> Facere dicta tenetur, a quam veniam ratione, nam minus, odio cumque ipsam dolores! Eligendi et ipsum praesentium obcaecati! Accusamus, tenetur? </p> </div>
<nord-modalid="modal"openaria-labelledby="title"> <h2slot="header"id="title">Give us feedback</h2>
<formmethod="dialog"id="myForm"> <nord-stack> <nord-select autofocus expand name="input-1" label="How would you describe the interface?" placeholder="Pick an option" > <optionvalue="1">Something is missing</option> <optionvalue="2">I’m confused or surprised</option> <optionvalue="3">It’s missing a feature</option> <optionvalue="4">It’s broken</option> <optionvalue="5">Something else</option> </nord-select> <nord-textarea expand label="Is there anything else you'd like to add?" hint="(Optional)" placeholder="Ex. I had an idea…" name="input-2" ></nord-textarea> <p> <strong>Note:</strong> some additional information may be included, including your email address. If you’re looking to send feedback unrelated to this interface, email us. </p> </nord-stack> </form>
<nord-modalid="modal"openaria-labelledby="title"> <h2slot="header"id="title">Using the "dialog" method for forms</h2>
<formid="myForm"method="dialog"class="n-reset n-typeset"> <p> If you set a form's method to <code>"dialog"</code>, a modal can be dismissed by submitting that form. This is convenient as it requires no additional javascript. </p> <p> When the form is submitted, the modal's <code>returnValue</code> is set to the <code>value</code> of the submit button that was clicked. </p> <p> A button can be associated with a form, by setting the button's <code>form</code> attribute to the form's <code>id</code>. </p> </form>
<nord-modalid="modal"openaria-labelledby="title"> <h2slot="header"id="title">Managing focus in modals</h2>
<formid="form"method="dialog"class="n-reset n-typeset"> <p> Add the <code>autofocus</code> attribute to any interactive element within the modal, to have it automatically focus whenever the modal is opened. </p>
<p>In this example the attribute has been added to the Submit element</p> </form>
<nord-modalid="modal"openaria-labelledby="title"> <h2slot="header"id="title">Give us feedback</h2>
<pstyle="margin-block-start: 0"> This example demonstrates how to use multiple modals to get confirmation from a user before discarding their work. If you attempt to close this modal via the close button, pressing the <kbd>Esc</kbd> key, or clicking outside the modal, a second modal will be shown asking you to confirm your action. </p>
<p> The first modal can only be closed by submitting its form or by confirming you want to discard your work in the second modal. </p>
<formmethod="dialog"id="myForm"> <nord-textarea expand label="Your message" value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iure?" ></nord-textarea> </form>
<nord-modalid="confirmModal"size="s"aria-labelledby="confirm-title"> <h2slot="header"id="confirm-title">Discard changes?</h2> <pclass="n-reset">All information you have entered will be deleted.</p>
<formmethod="dialog"id="myForm"> <nord-stack> <p> When a user hits Escape key, clicks the close button, or clicks outside, the modal emits a <code>cancel</code> event. </p> <p>If <code>preventDefault()</code> is called on the cancel event, then the modal will not close.</p> <nord-checkboxautofocusid="checkbox"label="Prevent close?"></nord-checkbox> </nord-stack> </form>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <divstyle="height: 80vh"></div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis tenetur amet temporibus nulla? Quisquam, quaerat sed! Assumenda itaque dolor ratione id voluptatum, excepturi eius voluptas iste facilis ut, quas minus. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <divstyle="height: 80vh"></div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis tenetur amet temporibus nulla? Quisquam, quaerat sed! Assumenda itaque dolor ratione id voluptatum, excepturi eius voluptas iste facilis ut, quas minus. </p>
<nord-stackdirection="horizontal"> <nord-buttonid="buttonSmall"variant="primary">Open small modal</nord-button> <nord-buttonid="buttonMedium"variant="primary">Open medium modal</nord-button> <nord-buttonid="buttonLarge"variant="primary">Open large modal</nord-button> </nord-stack>
<nord-modalid="modalSmall"size="s"aria-labelledby="smallHeader"> <h2id="smallHeader"slot="header">Small modal</h2> <formmethod="dialog"id="smallForm"class="n-reset"> <p>Small modals are best used for confirmation dialogs.</p> </form>
<formmethod="dialog"id="largeForm"class="n-reset n-typeset"> <p>Large modals are best suited for complex forms which require lots of space.</p> <p>When using large modals, please ensure the layout continues to work in narrow viewports.</p> </form>
<nord-modalid="modal"aria-labelledby="heading"openclass="n-typeset"scrollable> <h2slot="header"id="heading">Terms & agreements</h2>
<h3class="n-typescale-l"style="margin-block-start: 0">Lorem ipsum dolor, sit amet consectetur adipisicing elit</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis tenetur amet temporibus nulla? Quisquam, quaerat sed! Assumenda itaque dolor ratione id voluptatum, excepturi eius voluptas iste facilis ut, quas minus. </p>
<h3class="n-typescale-l">Lorem ipsum dolor sit</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
<h3class="n-typescale-l">Lorem ipsum dolor sit amet consectetur</h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid repellat nam dolorum ab? Optio ex facere commodi aspernatur, laboriosam labore dicta totam ab repudiandae ullam quibusdam soluta odio, quis possimus. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet eaque corrupti alias sint tempora dolorum, incidunt fugit architecto veritatis, eum id nulla doloribus aut numquam earum natus vero repellat. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione rem officia hic odit laboriosam sed temporibus amet reprehenderit quod. Natus sit quia veniam accusantium officiis minus, deleniti a ipsam quisquam. </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit voluptas aperiam sit facilis excepturi hic ad iusto magni vel. Exercitationem iusto dolor placeat quisquam eaque cumque at incidunt, officia doloremque in earum nobis perspiciatis quo mollitia. Debitis eum fuga, excepturi quo dicta, deserunt ea quidem et, perspiciatis necessitatibus veritatis autem. </p>
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
""
scrollable
scrollable
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.
boolean
false
Events
Event
Description
Type
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 name
Description
Default slot
Default slot
header
Slot which holds the header of the modal, positioned next to the close button.
footer
Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.
Methods
Method name
Parameters
Description
showModal() => void
N/A
Show the modal, automatically moving focus to the modal or a child element with an autofocus attribute.
close(returnValue?: string) => void
returnValue: An optional value to indicate why the modal was closed.
Programmatically close the modal.
focus(options?: FocusOptions) => void
options: 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.
Property
Description
Default
--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:
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”:
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 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.