Skip to content
Nana UI

Dialog

View .md Download

A modal dialog built on the native <dialog> element — so it gets the top layer, a backdrop, focus trapping and Escape-to-close for free. Compose it from nana-dialog-header, nana-dialog-body and nana-dialog-footer.

Preview

Section titled “Preview”
Set the open attribute or call show() to display it.

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/dialog";

Basic usage

Section titled “Basic usage”
<nana-dialog label="Dialog" open>
  Set the <code>open</code> attribute or call <code>show()</code> to display it.
</nana-dialog>

Subcomponents

Section titled “Subcomponents”

Compose the dialog with nana-dialog-header, nana-dialog-body, and nana-dialog-footer. Open it with the open attribute, .show(), or a data-open="#id" trigger; close with data-close.

<nana-button data-open="#invite">Invite teammate</nana-button>


<nana-dialog id="invite" aria-label="Invite teammate">
  <nana-dialog-header>Invite teammate</nana-dialog-header>
  <nana-dialog-body>
    <nana-input label="Email" type="email" placeholder="ada@example.com"></nana-input>
  </nana-dialog-body>
  <nana-dialog-footer>
    <nana-button variant="ghost" data-close>Cancel</nana-button>
    <nana-button variant="primary" data-close>Send invite</nana-button>
  </nana-dialog-footer>
</nana-dialog>

Variants & sizes

Section titled “Variants & sizes”

Set variant (modal, alert, drawer, fullscreen) and size (xs–xl, fullscreen). Use placement="start|end" for the drawer variant.

<nana-dialog variant="alert" size="sm" aria-label="Delete project">…</nana-dialog>
<nana-dialog variant="drawer" placement="end" aria-label="Settings">…</nana-dialog>
<nana-dialog variant="fullscreen" aria-label="Editor">…</nana-dialog>

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
ariaLabelaria-labelstring | nullnullAccessible label (use when there is no visible heading)
noBackdropCloseno-backdrop-closebooleanfalseDon't close when the backdrop is clicked
noEscapeCloseno-escape-closebooleanfalseDon't close when Escape is pressed
open—booleanfalseWhether the dialog is open
placement—DialogPlacement'end'Which edge a drawer slides from
size—DialogSize'md'Panel size
variant—DialogVariant'modal'Behaviour / placement style

Events

EventDescription
nana-openFired after the dialog opens
nana-closeFired after the dialog closes (`detail.returnValue`)

Slots

SlotDescription
(default)Dialog content (header / body / footer)

CSS parts

PartDescription
::part(dialog)The native `<dialog>` element
::part(panel)The content surface

CSS custom properties

PropertyDescription
--nana-dialog-widthPanel width (per size by default)
--nana-dialog-backdropBackdrop colour
--nana-dialog-radiusPanel corner radius

Events

Section titled “Events”
EventTypeDescription
nana-openCustomEventFired after the dialog opens
nana-closeCustomEventFired after the dialog closes (detail.returnValue)

Slots

Section titled “Slots”
SlotDescription
(default)Dialog content (header / body / footer)

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--nana-dialog-width—Panel width (per size by default)
--nana-dialog-backdrop—Backdrop colour
--nana-dialog-radius—Panel corner radius

CSS Parts

Section titled “CSS Parts”
PartDescription
dialogThe native <dialog> element
panelThe content surface

Accessibility

Section titled “Accessibility”
  • Keyboard accessible
  • Screen-reader labels
  • Focus-visible states
  • ARIA roles and states
  • WCAG 2.2 AA contrast
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Dialog interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook