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.

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>

<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal id="modal" aria-labelledby="title" size="s" open>
  <h2 slot="header" id="title">Delete patient?</h2>

  <form method="dialog" id="myForm">
    <p class="n-reset">All information you have entered will be deleted.</p>
  </form>

  <nord-stack slot="footer" direction="horizontal" align-items="center" gap="s">
    <nord-stack style="flex: 1" direction="horizontal" gap="s" align-items="center">
      <nord-icon name="interface-warning"></nord-icon>
      <p>This cannot be undone</p>
    </nord-stack>

    <nord-button form="myForm">Cancel</nord-button>
    <nord-button form="myForm" variant="danger" autofocus>Delete</nord-button>
  </nord-stack>
</nord-modal>

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

<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">Discard changes?</h2>
  <p class="n-reset">All information you have entered will be deleted.</p>

  <nord-button slot="footer" expand id="cancelButton">Cancel</nord-button>
  <nord-button slot="footer" expand id="confirmButton" variant="danger" autofocus>Discard</nord-button>
</nord-modal>

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

<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal size="m" id="modal" open aria-labelledby="title">
  <svg slot="feature" width="782" height="412" viewBox="0 0 782 412" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="782" height="412" fill="#FF857D" />
    <g clip-path="url(#clip0_5_211)">
      <rect width="782" height="412" fill="#F6F8F8" />
      <rect x="391" width="206" height="206" fill="#CBD2D7" />
      <rect x="391" y="206" width="206" height="206" fill="#F6F8F8" />
      <rect x="597" width="195.5" height="206" fill="#D8DDE1" />
      <rect x="597" y="206" width="195.5" height="206" fill="#E3E9EB" />
      <rect x="389" y="266" width="4.00002" height="400" transform="rotate(90 389 266)" fill="#D8DDE1" />
      <rect x="389" y="326" width="4.00002" height="400" transform="rotate(90 389 326)" fill="#D8DDE1" />
      <rect x="389" y="386" width="4.00002" height="400" transform="rotate(90 389 386)" fill="#D8DDE1" />
      <path d="M-11 208H389V416H-11V208Z" stroke="#D8DDE1" stroke-width="4" />
      <rect x="327" y="210" width="4" height="198" fill="#D8DDE1" />
      <rect x="267" y="210" width="4" height="202" fill="#D8DDE1" />
      <rect x="207" y="210" width="4" height="202" fill="#D8DDE1" />
      <rect x="147" y="210" width="4" height="202" fill="#D8DDE1" />
      <rect x="87" y="210" width="4" height="202" fill="#D8DDE1" />
      <rect x="27" y="210" width="4" height="202" fill="#D8DDE1" />
      <rect x="391" y="206" width="206" height="206" rx="103" fill="#3559C7" />
      <circle opacity="0.1" cx="269" cy="328" r="60" stroke="white" stroke-width="4" />
      <rect x="-65" y="268" width="394" height="210" rx="60" stroke="#FC685E" stroke-width="4" />
      <path
        d="M180.384 167H206.256L163.248 48.392H134.52L91.512 167H117.384L124.44 146.168H173.328L180.384 167ZM131.832 124.328L148.968 74.264L165.936 124.328H131.832ZM289.781 148.016C287.429 148.016 286.085 146.336 286.085 143.312V111.56C286.085 92.744 272.981 81.656 250.301 81.656C230.981 81.656 217.709 91.568 213.509 108.536L233.837 113.576C235.181 105.344 241.397 100.472 249.965 100.472C258.197 100.472 263.069 104.336 263.069 110.384V110.72C263.069 114.248 260.885 116.936 256.685 117.608L235.181 120.968C219.221 123.32 209.981 131.888 209.981 144.656C209.981 160.112 220.229 169.016 237.869 169.016C249.797 169.016 259.037 164.816 264.581 157.256C267.101 163.64 272.981 167 281.549 167H293.813V148.016H289.781ZM245.429 152.384C237.701 152.384 232.997 149.024 232.997 143.48C232.997 138.44 237.029 135.08 243.413 134.072L263.069 131.048V134.072C263.069 145.16 256.013 152.384 245.429 152.384Z"
        fill="#667680"
      />
    </g>
    <defs>
      <clipPath id="clip0_5_211">
        <rect width="782" height="412" fill="white" />
      </clipPath>
    </defs>
  </svg>

  <div class="n-reset n-typeset">
    <h2 id="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>

  <form method="dialog" slot="footer">
    <nord-button expand variant="primary">Finish</nord-button>
  </form>
</nord-modal>

<script>
  openButton.addEventListener("click", () => modal.showModal())
</script>

<nord-button id="trigger" variant="primary">Open modal</nord-button>

<nord-modal id="modal" open aria-labelledby="title">
  <h2 slot="header" id="title">Give us feedback</h2>

  <form method="dialog" id="myForm">
    <nord-stack>
      <nord-select
        autofocus
        expand
        name="input-1"
        label="How would you describe the interface?"
        placeholder="Pick an option"
      >
        <option value="1">Something is missing</option>
        <option value="2">I’m confused or surprised</option>
        <option value="3">It’s missing a feature</option>
        <option value="4">It’s broken</option>
        <option value="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-button slot="footer" expand form="myForm" value="cancel">Cancel</nord-button>
  <nord-button slot="footer" expand form="myForm" type="submit" value="add" variant="primary">Submit</nord-button>
</nord-modal>

<div class="n-margin-bs-m">
  <output id="output"></output>
  <pre id="values"></pre>
</div>

<script>
  trigger.addEventListener("click", e => modal.showModal())

  myForm.addEventListener("submit", e => {
    values.innerText = JSON.stringify(Object.fromEntries(new FormData(e.target)), null, 2)
  })
  modal.addEventListener("close", e => {
    output.innerHTML = `Modal <code>returnValue</code>: <code>${modal.returnValue}</code>`
  })
</script>

<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal id="modal" size="l" aria-labelledby="title" open>
  <h2 id="title" slot="header">Add note</h2>

  <form method="dialog" id="myForm">
    <nord-stack>
      <nord-stack direction="horizontal">
        <nord-select expand label="Type" autofocus>
          <option value="1">Other note</option>
          <option value="2">Another note</option>
          <option value="3">Yet another note</option>
        </nord-select>
        <nord-input label="Title" expand></nord-input>
      </nord-stack>

      <nord-stack direction="horizontal">
        <nord-input label="Client" expand type="search"></nord-input>
        <nord-input label="Patients" expand type="search"></nord-input>
      </nord-stack>

      <nord-stack direction="horizontal">
        <nord-select expand label="Consultation">
          <option value="1">22/03/2022 16:02 - Sargo hair loss</option>
          <option value="2">Consultation 2</option>
          <option value="3">Consultation 3</option>
          <option value="4">Consultation 4</option>
        </nord-select>
        <nord-select label="Diagnostic imaging request" expand placeholder="---">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
        </nord-select>
      </nord-stack>

      <nord-select label="Consultation laboratory request" expand style="width: calc(50% - 0.5em)" placeholder="---">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </nord-select>

      <nord-textarea expand label="Note" resize="auto"></nord-textarea>
    </nord-stack>
  </form>

  <nord-button slot="footer" form="myForm">Cancel</nord-button>
  <nord-button slot="footer" form="myForm" variant="primary">Save</nord-button>
</nord-modal>

<style>
  nord-textarea {
    --n-textarea-block-size: 150px;
  }

  @media (max-width: 640px) {
    nord-stack {
      flex-direction: column;
    }
  }
</style>

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

<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal id="modal" open aria-labelledby="title">
  <h2 slot="header" id="title">Using the "dialog" method for forms</h2>

  <form id="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-button slot="footer" form="myForm" expand value="cancel">Cancel</nord-button>
  <nord-button slot="footer" form="myForm" expand value="yes" variant="primary" autofocus>Save</nord-button>
</nord-modal>

<script>
  openButton.addEventListener("click", e => modal.showModal())

  modal.addEventListener("close", () => {
    console.log(modal.returnValue)
  })
</script>

<nord-button variant="primary" id="openButton">Open modal</nord-button>

<nord-modal id="modal" open aria-labelledby="title">
  <h2 slot="header" id="title">Managing focus in modals</h2>

  <form id="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-button slot="footer" form="form" expand>Cancel</nord-button>
  <nord-button slot="footer" form="form" expand variant="primary" autofocus>Submit</nord-button>
</nord-modal>

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

<nord-button id="trigger" variant="primary">Open modal</nord-button>

<nord-modal id="modal" open aria-labelledby="title">
  <h2 slot="header" id="title">Give us feedback</h2>

  <div class="n-typeset n-margin-be-m">
    <p>
      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>
  </div>

  <form method="dialog" id="myForm">
    <nord-textarea
      expand
      label="Your message"
      value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iure?"
    ></nord-textarea>
  </form>

  <nord-button slot="footer" expand form="myForm" type="submit" variant="primary">Submit feedback</nord-button>
</nord-modal>

<nord-modal id="confirmModal" size="s" aria-labelledby="confirm-title">
  <h2 slot="header" id="confirm-title">Discard changes?</h2>
  <p class="n-reset">All information you have entered will be deleted.</p>

  <nord-button slot="footer" expand id="cancelButton">Cancel</nord-button>
  <nord-button slot="footer" expand id="confirmButton" variant="danger" autofocus>Discard</nord-button>
</nord-modal>

<script>
  const modal = document.querySelector("#modal")
  const confirmModal = document.querySelector("#confirmModal")

  trigger.addEventListener("click", e => modal.showModal())

  modal.addEventListener("cancel", e => {
    e.preventDefault()
    confirmModal.showModal()
  })

  cancelButton.addEventListener("click", () => {
    confirmModal.close()
  })

  confirmButton.addEventListener("click", () => {
    confirmModal.close()
    modal.close()
  })
</script>

<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">Preventing close</h2>

  <form method="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-checkbox autofocus id="checkbox" label="Prevent close?"></nord-checkbox>
    </nord-stack>
  </form>

  <nord-button slot="footer" expand form="myForm">Cancel</nord-button>
  <nord-button slot="footer" expand form="myForm" variant="primary">Submit</nord-button>
</nord-modal>

<script>
  openButton.addEventListener("click", e => modal.showModal())

  modal.addEventListener("cancel", e => {
    if (checkbox.checked) {
      console.log("preventing close")
      e.preventDefault()
    }
  })

  modal.addEventListener("close", e => {
    console.log("modal closed")
  })
</script>

<nord-stack direction="horizontal">
  <nord-button id="outerButton" variant="primary">Scroll externally</nord-button>
  <nord-button id="innerButton" variant="primary">Scroll internally</nord-button>
</nord-stack>

<nord-modal id="outerModal" aria-labelledby="outerHeader">
  <h2 slot="header" id="outerHeader">Scroll externally</h2>

  <div class="n-typeset n-margin-be-m">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </p>
    <div style="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>
  </div>

  <form slot="footer" method="dialog">
    <nord-button value="cancel">Cancel</nord-button>
  </form>
  <form slot="footer" method="dialog">
    <nord-button variant="primary" value="accept">Accept terms</nord-button>
  </form>
</nord-modal>

<nord-modal id="innerModal" aria-labelledby="innerHeader" scrollable>
  <h2 slot="header" id="innerHeader">Scroll internally</h2>

  <div class="n-typeset n-margin-be-m">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </p>
    <div style="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>
  </div>

  <form slot="footer" method="dialog">
    <nord-button value="cancel">Cancel</nord-button>
  </form>
  <form slot="footer" method="dialog">
    <nord-button variant="primary" value="accept">Accept terms</nord-button>
  </form>
</nord-modal>

<script>
  outerButton.addEventListener("click", () => outerModal.showModal())
  innerButton.addEventListener("click", () => innerModal.showModal())
</script>

<nord-stack direction="horizontal">
  <nord-button id="buttonSmall" variant="primary">Open small modal</nord-button>
  <nord-button id="buttonMedium" variant="primary">Open medium modal</nord-button>
  <nord-button id="buttonLarge" variant="primary">Open large modal</nord-button>
</nord-stack>

<nord-modal id="modalSmall" size="s" aria-labelledby="smallHeader">
  <h2 id="smallHeader" slot="header">Small modal</h2>
  <form method="dialog" id="smallForm" class="n-reset">
    <p>Small modals are best used for confirmation dialogs.</p>
  </form>

  <nord-button slot="footer" form="smallForm">Cancel</nord-button>
  <nord-button slot="footer" form="smallForm" variant="primary" autofocus>Save</nord-button>
</nord-modal>

<nord-modal id="modalMedium" size="m" aria-labelledby="mediumHeader">
  <h2 id="mediumHeader" slot="header">Medium modal</h2>

  <form method="dialog" id="mediumForm" class="n-reset">
    <p>Medium is the default size, and is suitable for most use cases.</p>
  </form>

  <nord-button slot="footer" form="mediumForm">Cancel</nord-button>
  <nord-button slot="footer" form="mediumForm" variant="primary" autofocus>Save</nord-button>
</nord-modal>

<nord-modal id="modalLarge" size="l" aria-labelledby="largeHeader">
  <h2 id="largeHeader" slot="header">Large modal</h2>

  <form method="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-button slot="footer" form="largeForm">Cancel</nord-button>
  <nord-button slot="footer" form="largeForm" variant="primary" autofocus>Save</nord-button>
</nord-modal>

<script>
  buttonSmall.addEventListener("click", () => modalSmall.showModal())
  buttonMedium.addEventListener("click", () => modalMedium.showModal())
  buttonLarge.addEventListener("click", () => modalLarge.showModal())
</script>

<nord-button id="trigger" variant="primary">Open modal</nord-button>

<nord-modal id="modal" aria-labelledby="heading" open class="n-typeset" scrollable>
  <h2 slot="header" id="heading">Terms &amp; agreements</h2>

  <h3 class="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>

  <h3 class="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>

  <h3 class="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>

  <h3 class="n-typescale-l">Consectetur adipiscing elit</h3>

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

  <form slot="footer" method="dialog">
    <nord-button value="cancel">Cancel</nord-button>
  </form>
  <form slot="footer" method="dialog">
    <nord-button variant="primary" autofocus value="accept">Accept terms</nord-button>
  </form>
</nord-modal>

<script>
  trigger.addEventListener("click", e => modal.showModal())
</script>

Properties

Property	Attribute	Description	Type	Default
`open`	`open`	Controls whether the modal is open or not.	`boolean`	`false`
`size`	`size`	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`	`""`
`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:

Key	Description
`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:

Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.

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.