Dialog

Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.

Open Dialog Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.



Close

Usage

<nile-dialog label="Title" class="dialog-overview">
  Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate
  attention.
  <nile-button slot="footer" variant="primary">Close</nile-button>
</nile-dialog>
<nile-button class="open-button">Open Dialog</nile-button>

<script>
  const dialog = document.querySelector('.dialog-overview');
  const openButton = document.querySelector('.open-button');
  openButton.addEventListener('click', () => dialog.show());
  const closeButton = dialog.querySelector('nile-button[slot="footer"]');
  closeButton.addEventListener('click', () => dialog.hide());
</script>

Without header

Open Dialog Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.



Close

Usage

<nile-dialog noHeader class="dialog-overview">
  Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate
  attention.
  <nile-button slot="footer" variant="primary">Close</nile-button>
</nile-dialog>
<nile-button class="open-button">Open Dialog</nile-button>

Scroll

Open Dialog Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.























Close

Prevent overlay close

Open Dialog Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.



Close

Usage

<nile-dialog preventOverlayClose class="dialog-overview">
  Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate
  attention.
  <nile-button slot="footer" variant="primary">Close</nile-button>
</nile-dialog>
<nile-button class="open-button">Open Dialog</nile-button>

Slots

Name Description
(default) The dialog’s main content.
label The dialog’s label. Alternatively, you can use the label attribute.
sublabel The dialog’s sublabel. Alternatively, you can use the sublabel attribute.
header-actions Optional actions to add to the header. Works best with .
footer The dialog’s footer, usually one or more buttons representing various options.

Attributes & Properties

Name Description Type Default
modal Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active nile modal, call modal.activateExternal() when the third-party modal opens. Upon closing, call modal.deactivateExternal() to restore nile’s focus trapping. - new Modal(this)
open Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the show() and hide() methods and this attribute will reflect the dialog’s open state. boolean false
preventOverlayClose Enables/Disables the closure of popover on clicking outside the opened section Boolean false
label The dialog’s label as displayed in the header. You should always include a relevant label even when using no-header, as it is required for proper accessibility. If you need to display HTML, use the label slot instead. string ''
sublabel The dialog’s sublabel as displayed in the header. You should always include a relevant label even when using no-header, as it is required for proper accessibility. If you need to display HTML, use the sublabel slot instead. string ''
noHeader Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog. boolean false
updateComplete A read-only promise that resolves when the component has finished updating. - -

Events

Name Description Event Detail
nile-show Emitted when the dialog opens. -
nile-after-show Emitted after the dialog opens and all animations are complete. -
nile-hide Emitted when the dialog closes. -
nile-after-hide Emitted after the dialog closes and all animations are complete. -
nile-initial-focus Emitted when the dialog opens and is ready to receive focus. Calling event.preventDefault() will prevent focusing and allow you to set it on a different element, such as an input. -
nile-request-close Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling event.preventDefault() will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. { source: 'close-button' | 'keyboard' | 'overlay' }

Methods

Name Description Arguments
show() Shows the dialog. -
hide() Hides the dialog. -

Custom Properties

Name Description Default
--width The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
--header-spacing The amount of padding to use for the header.
--body-spacing The amount of padding to use for the body.
--footer-spacing The amount of padding to use for the footer.

CSS Parts

Name Description
base The component’s base wrapper.
overlay The overlay that covers the screen behind the dialog.
panel The dialog’s panel (where the dialog and its content are rendered).
header The dialog’s header. This element wraps the title and header actions.
header-actions Optional actions to add to the header. Works best with <nile-icon-button>.
title The dialog’s title.
close-button The close button, an <nile-icon-button>.
close-button__base The close button’s exported base part.
body The dialog’s body.
footer The dialog’s footer.

Dependencies

nile-icon , nile-icon-button