Dialog

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, -body and -footer.

Variants

Modal Alert Form Drawer Fullscreen
dialog.html
html
1 <nana-dialog id="invite">
2 <nana-dialog-header>Invite teammate</nana-dialog-header>
3 <nana-dialog-body>Send an invitation to collaborate.</nana-dialog-body>
4 <nana-dialog-footer>
5 <nana-button variant="ghost" onclick="invite.close()">Cancel</nana-button>
6 <nana-button variant="primary" onclick="invite.close()">Send</nana-button>
7 </nana-dialog-footer>
8 </nana-dialog>
9
10 <nana-button onclick="invite.show()">Invite</nana-button>

Sizes

xssmmdlgxl

Subcomponents

anatomy.html
html
1 <Dialog>
2 <DialogHeader />
3 <DialogBody />
4 <DialogFooter />
5 </Dialog>

Import

main.ts
ts
1 import "@nana-tec/ui-components/dialog";

Events

EventDetail
nana-open—
nana-close{ returnValue }

Props

AttributeTypeDefaultDescription
openbooleanfalseWhether the dialog is open
variantmodal | alert | drawer | fullscreenmodalBehaviour / placement style
sizexs | sm | md | lg | xl | fullscreenmdPanel size
placementstart | endendWhich edge a drawer slides from
no-backdrop-closebooleanfalseDon't close on backdrop click
no-escape-closebooleanfalseDon't close on Escape

Also exposes show() and close(returnValue?) methods.

Invite teammate Send an invitation to collaborate on this project. Cancel Send invite Delete project? This permanently removes the project and all its data. Cancel Delete Create user
Cancel Create Settings Slides in from the edge; great for filters and settings. Done Fullscreen dialog Mobile-first pattern that fills the viewport. Close Size xs This dialog uses size="xs". Close Size sm This dialog uses size="sm". Close Size md This dialog uses size="md". Close Size lg This dialog uses size="lg". Close Size xl This dialog uses size="xl". Close