# nord-modal > 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. ## 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: > **Do:** Edit patient > **Don't:** Edit the patient called John Doe > **Do:** Discard changes? > **Don't:** Discard? > **Do:** Delete patient? > **Don't:** 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): > **Do:** New appointment > **Don't:** New Appointment Avoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”: > **Do:** Change theme > **Don't:** Change the theme Avoid ending in punctuation: > **Do:** Edit patient > **Don't:** 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](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html){rel="[\"nofollow\"]"}. ## Examples ### Basic ```html Open modal

Modal title

Modal body text goes here.

Cancel Save changes ``` ### Custom Footer ```html Open modal

All information you have entered will be deleted.

This cannot be undone

 Cancel Delete ``` ### Destructive ```html Open modal

Discard changes?

All information you have entered will be deleted.

Cancel Discard ``` ### Feature ```html Open modal

Feature slot

A blank canvas for rich content

The feature slot renders its content flush to the edges of the modal, with no padding or styling applied by the modal itself. The illustration above fills the top edge to edge because of it.

Treat it as an empty canvas: place any markup inside — an image, illustration, video or fully custom layout — and control its presentation entirely. The modal contributes nothing of its own.

Finish
``` ### Feature Without Header Or Footer ```html Open modal

The feature slot renders its content flush to the edges of the modal, with no padding or styling applied by the modal itself. The illustration above fills the top edge to edge because of it.

Treat it as an empty canvas: place any markup inside — an image, illustration, video or fully custom layout — and control its presentation entirely. Here there is no header and no footer, just the feature slot.

``` ### Form Complex ```html Open modal

Add note

Cancel Save ``` ### Form Method Dialog ```html Open modal

Using the "dialog" method for forms

If you set a form's method to "dialog", a modal can be dismissed by submitting that form. This is convenient as it requires no additional javascript.

When the form is submitted, the modal's returnValue is set to the value of the submit button that was clicked.

A button can be associated with a form, by setting the button's form attribute to the form's id.

Cancel Save ``` ### Form ```html Open modal

Give us feedback

Note: some additional information may be included, including your email address. If you're looking to send feedback unrelated to this interface, email us.

Cancel Submit 



```

### Managing Focus

```html
Open modal


  
Managing focus in modals


  

    

      Add the autofocus attribute to any interactive element within the modal, to have it automatically
      focus whenever the modal is opened.
    


    
In this example the attribute has been added to the Submit element

  


  
    Cancel
    Submit
  

```

### Multiple Modals

```html
Open modal


  
Give us feedback


  

    

      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 Esc key, or clicking outside the
      modal, a second modal will be shown asking you to confirm your action.
    


    

      The first modal can only be closed by submitting its form or by confirming you want to discard your work in the
      second modal.
    

  


  

    
  


  Submit feedback



  
Discard changes?

  
All information you have entered will be deleted.


  
    Cancel
    Discard
  

```

### Preventing Close

```html
Open modal


  
Preventing close


  

    
      

        When a user hits Escape key, clicks the close button, or clicks outside, the modal emits a
        cancel event.
      

      
If preventDefault() is called on the cancel event, then the modal will not close.

      
    
  


  
    Cancel
    Submit
  

```

### Persistent

```html
Open modal


  
Persistent modal


  
    

      This modal uses the persistent attribute. It cannot be dismissed
      by clicking the backdrop or pressing Escape, and the close button is automatically hidden.
    

    
Only the action buttons below can close it.

  

  
    Cancel
    Confirm
  

```

### Scroll Behavior

```html

  Scroll externally
  Scroll internally



  
Scroll externally


  

    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    

    

    

      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.
    

  


  
    Cancel
    Accept terms
  



  
Scroll internally


  

    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    

    

    

      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.
    

  


  
    Cancel
    Accept terms
  

```

### Size

```html

  Open small modal
  Open medium modal
  Open large modal
  Open extra large modal



  
Small modal

  

    
Small modals are best used for confirmation dialogs.

  


  
    Cancel
    Save
  



  
Medium modal


  

    
Medium is the default size, and is suitable for most use cases.

  


  
    Cancel
    Save
  



  
Large modal


  

    
Large modals are best suited for complex forms which require lots of space.

    
When using large modals, please ensure the layout continues to work in narrow viewports.

  


  
    Cancel
    Save
  



  
Extra large modal


  

    
Extra large modals are best suited for when you need to fill the full width of the viewport.

    
When using extra large modals, please ensure the layout continues to work in narrow viewports.

  


  
    Cancel
    Save
  

```

### Trigger Events

```html
Open modal


  
Detecting Modal Close Triggers


  
    
Try different ways to close the modal:

    
    
Check the console to see the logged events. The original event that triggered the close is available on event.trigger in both cancel and close event handlers.


    

    
    
  

  
    Cancel
    Delete
    Save
    Force Close
  



```

### Terms

```html
Open modal


  
Terms & agreements


  

    

      Lorem ipsum dolor, sit amet consectetur adipisicing elit
    


    

      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.
    


    

      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.
    


    
Lorem ipsum dolor sit


    

      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.
    


    
Lorem ipsum dolor sit amet consectetur


    

      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.
    


    
Consectetur adipiscing elit


    

      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.
    


    

      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.
    


    

      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.
    

  


  
    Cancel
    Accept terms
  

```

## API Reference

### Properties

- **open** (`boolean`, default: `false`) — Controls whether the modal is open or not.
- **size** (`'s' | 'm' | 'l' | 'xl'`, default: `'m'`) — Controls the max-width of the modal when open.
- **scrollable** (`boolean`, default: `false`) — 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.
- **persistent** (`boolean`, default: `false`) — When true, the modal will not close when clicking the backdrop or pressing Escape,
and the close button will be hidden. Only programmatic close or custom action buttons
can dismiss the modal.

### Events

- **cancel** (`ModalCancelEvent`) — Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.
- **close** (`ModalCloseEvent`) — Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.

### Slots

- **(default)** — Default slot
- **header** — Slot which holds the header of the modal, positioned next to the close button.
- **feature** — Slot for full bleed content like an image.
- **footer** — Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.

### Methods

- **showModal** — `showModal() => void` — Show the modal, automatically moving focus to the modal or a child
element with an autofocus attribute.
- **close** — `close(returnValue?: string, trigger?: Event) => void` — Programmatically close the modal.
- **focus** — `focus(options?: FocusOptions) => void` — Programmatically focus the modal.

### CSS Custom Properties

- `--n-modal-padding-inline` (default: `var(--n-space-m)`) — Controls the padding on the sides of the modal, using our spacing tokens.
- `--n-modal-padding-block` (default: `var(--n-space-m)`) — Controls the padding above and below the header of the modal, using our spacing tokens.
- `--n-modal-max-inline-size` (default: `620px`) — Controls the width of the modal.

### Dependencies

- `icon`
- `footer`