DefaultInvokerCommandEventsVisualContentSmallMediumLargeTextWrapNonClosableAlignmentPositionLegacyTriggerLegacyBehaviorTriggerShadowRootScrollContentInertModalContainerStylesMaxHeightLegacyDOMCreationCenterAlignment
<nve-button popovertarget="dialog">button</nve-button>
<nve-dialog id="dialog" modal closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
Edit Example
Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. MDN Popover API
<nve-button commandfor="dialog" command="toggle-popover">toggle popover</nve-button>
<nve-dialog id="dialog" modal closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
Edit Example
Use the commandfor and command attributes to trigger custom Invoker Commands, such as toggling a dialog.
<nve-dialog id="dialog" modal closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
<nve-button popovertarget="dialog">button</nve-button>
<script type="module">
const dialog = document.querySelector("nve-dialog");
dialog.addEventListener("beforetoggle", () => console.log("beforetoggle"));
dialog.addEventListener("toggle", () => console.log("toggle"));
dialog.addEventListener("open", () => console.log("open"));
dialog.addEventListener("close", () => console.log("close"));
</script>
Edit Example
Event Description close Dispatched when the dialog closes.
Dispatched when the dialog opens.
Dispatched on a popover element just after showing or hiding. MDN
Dispatched on a popover just before showing or hiding. MDN
<nve-dialog closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
<nve-dialog-footer>
<nve-button>button</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Dialog with header, content, and footer structure for complete user interactions. Use the footer for action buttons, organizing the dialog into clear sections that guide users through the information hierarchy and toward decision-making.
<nve-dialog closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
<nve-dialog-footer>
<nve-button>cancel</nve-button>
<nve-button interaction="emphasis">action</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Dialog with primary and secondary actions in footer. Use cancel + emphasized action pattern for confirmations or decisions where you need to present a choice, with emphasis on the primary action guiding users toward the preferred or expected path.
<nve-dialog size="sm" closable>
<h3 nve-text="heading">Small</h3>
<p nve-text="body">some text content in a small dialog</p>
</nve-dialog>
Edit Example
Small dialog size for brief confirmations or single-field inputs. Use size="sm" for simple yes/no confirmations, quick edits, or minimal interactions that don't require significant screen space, keeping the interface uncluttered.
<nve-dialog size="md" closable>
<h3 nve-text="heading">Medium</h3>
<p nve-text="body">some text content in a medium dialog</p>
</nve-dialog>
Edit Example
Medium dialog size (default) for standard forms and content. Use size="md" for typical dialogs containing short forms (3-5 fields), moderate content, or standard user interactions that need balanced space without overwhelming the interface.
<nve-dialog size="lg" closable>
<h3 nve-text="heading">Large</h3>
<p nve-text="body">some text content in a large dialog</p>
</nve-dialog>
Edit Example
Large dialog size for complex forms or extensive content. Use size="lg" for multi-section forms, detailed settings panels, or content-rich interactions where users need more space to work comfortably, but consider using a drawer for large content areas.
<nve-dialog closable>
<h3 nve-text="heading">Text Wrap</h3>
<p nve-text="body">
Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content
in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some
text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a
small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text
wrapped content in a small dialog. Some text wrapped content in a small dialog.
</p>
</nve-dialog>
Edit Example
Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.
<nve-button popovertarget="dialog">open</nve-button>
<nve-dialog id="dialog" modal>
<h3 nve-text="heading">Non-Closable Dialog</h3>
<p nve-text="body">Clicking the background to dismiss will not work here</p>
<nve-dialog-footer>
<nve-button popovertarget="dialog" popovertargetaction="hide">cancel</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Non-closable dialog requiring explicit action through buttons. Use non-closable dialogs sparingly for critical decisions (like irreversible deletions) or required acknowledgments where you must ensure users make a conscious choice rather than accidentally dismissing the dialog.
<nve-dialog>center</nve-dialog>
<nve-dialog position="top">top center</nve-dialog>
<nve-dialog position="top" alignment="start">top start</nve-dialog>
<nve-dialog position="top">top center</nve-dialog>
<nve-dialog position="top" alignment="end">top end</nve-dialog>
<nve-dialog position="right" alignment="start">right start</nve-dialog>
<nve-dialog position="right">right center</nve-dialog>
<nve-dialog position="right" alignment="end">right end</nve-dialog>
<nve-dialog position="bottom" alignment="start">bottom start</nve-dialog>
<nve-dialog position="bottom">bottom center</nve-dialog>
<nve-dialog position="bottom" alignment="end">bottom end</nve-dialog>
<nve-dialog position="left" alignment="start">left start</nve-dialog>
<nve-dialog position="left">left center</nve-dialog>
<nve-dialog position="left" alignment="end">left end</nve-dialog>
Edit Example
Determines the alignment of the popover relative to the provided anchor element.
Alignment Description start Aligns the popover to the beginning edge of the anchor for left or top alignment. end Aligns the popover to the ending edge of the anchor for right or bottom alignment. center Centers the popover along the anchor's edge for balanced positioning.
<style>
body {
min-height: 200vh;
}
</style>
<nve-dialog size="sm" position="bottom" alignment="end" closable>
<h3 nve-text="heading">Position</h3>
<p nve-text="body">some text content in a small dialog</p>
</nve-dialog>
Edit Example
Determines the position of an element along both inline and block axis. MDN
Position Description center Centers the popover directly over the anchor element. top Positions the popover above the anchor element. bottom Positions the popover below the anchor element. left Positions the popover to the left side of the anchor element. right Positions the popover to the right side of the anchor element.
<nve-button id="dialog-btn">open</nve-button>
<nve-dialog trigger="dialog-btn" closable modal hidden>
<h3 nve-text="heading">Title</h3>
<p nve-text="body">some text content in a closable dialog</p>
<nve-accordion behavior-expand>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Heading</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences including theme, notification settings, and default project configurations to
customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-dialog>
<script type="module">
const dialog = document.querySelector("nve-dialog");
dialog.addEventListener("open", (e) => {
console.log(e);
dialog.hidden = false;
});
dialog.addEventListener("close", (e) => {
console.log(e);
dialog.hidden = true;
});
</script>
Edit Example
Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.
Legacy Behavior Trigger
test-case
<nve-button id="dialog-btn">open</nve-button>
<nve-dialog trigger="dialog-btn" behavior-trigger closable modal hidden>
<h3 nve-text="heading">Title</h3>
<p nve-text="body">some text content in a closable dialog</p>
<nve-accordion behavior-expand>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Heading</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences including theme, notification settings, and default project configurations to
customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-dialog>
Edit Example
Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.
<dialog-test-shadow-root>
<template shadowrootmode="open">
<style>
:host {
box-sizing: border-box;
display: block;
margin: 25vh auto;
width: 400px;
height: 400px;
background: red;
visibility: visible !important;
}
</style>
<nve-dialog size="sm">center</nve-dialog>
<nve-dialog size="sm" position="top">top center</nve-dialog>
<nve-dialog size="sm" position="top" alignment="start">top start</nve-dialog>
<nve-dialog size="sm" position="top" alignment="end">top end</nve-dialog>
<nve-dialog size="sm" position="right" alignment="start">right start</nve-dialog>
<nve-dialog size="sm" position="right">right center</nve-dialog>
<nve-dialog size="sm" position="right" alignment="end">right end</nve-dialog>
<nve-dialog size="sm" position="bottom" alignment="start">bottom start</nve-dialog>
<nve-dialog size="sm" position="bottom">bottom center</nve-dialog>
<nve-dialog size="sm" position="bottom" alignment="end">bottom end</nve-dialog>
<nve-dialog size="sm" position="left" alignment="start">left start</nve-dialog>
<nve-dialog size="sm" position="left">left center</nve-dialog>
<nve-dialog size="sm" position="left" alignment="end">left end</nve-dialog>
</template>
</dialog-test-shadow-root>
Edit Example
Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.
<nve-dialog id="dialog" modal closable style="height: 400px">
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body" style="height: 600px">some tall content</p>
<p nve-text="body">some overflow content</p>
<nve-dialog-footer>
<nve-button id="cancel-btn">cancel</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Dialog with scrollable content while keeping header and footer fixed. Use scrollable content areas for dialogs with variable or lengthy content (like terms of service or detailed descriptions) while keeping action buttons always visible, ensuring users can complete the task without scrolling to find buttons.
<style>
body {
display: block !important;
padding: 24px;
}
</style>
<div>
<button popovertarget="popover">btn</button>
<div>
<button popovertarget="popover">btn</button>
<nve-dialog id="popover" modal>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<button popovertarget="dropdown">button</button>
<nve-dropdown id="dropdown">
dropdown content
<button>btn</button>
</nve-dropdown>
<p nve-text="body">some text content in a closable dialog</p>
<button>btn</button>
<button>btn</button>
</nve-dialog>
</div>
</div>
<button popovertarget="popover">btn</button><br />
<button popovertarget="popover">btn</button>
<div>
<button popovertarget="popover">btn</button>
<div>
<button popovertarget="popover">btn</button>
<div>
<button popovertarget="popover">btn</button>
</div>
</div>
</div>
Edit Example
Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.
Container Styles
test-case
<nve-dialog id="slots-dialog" closable popover="manual" position="top">
<nve-dialog-header>
<h3 nve-text="heading semibold">default</h3>
</nve-dialog-header>
<p nve-text="body">default dialog with header and footer components</p>
<nve-dialog-footer>
<nve-button>button</nve-button>
</nve-dialog-footer>
</nve-dialog>
<nve-dialog id="content-dialog" closable popover="manual" position="right">
<h3 nve-text="heading semibold">title</h3>
<p nve-text="body">dialog with only content and no header or footer components</p>
<nve-button>button</nve-button>
</nve-dialog>
<nve-dialog id="custom-dialog" closable style="--padding: 0" position="bottom">
<h3 nve-text="heading semibold">title</h3>
<p nve-text="body">dialog with only content and no header or footer components and --padding set to 0</p>
<nve-button>button</nve-button>
</nve-dialog>
<nve-dialog id="custom-slots" closable style="--padding: 48px" position="left">
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">dialog with header and footer components with --padding set to 48px</p>
<nve-dialog-footer>
<nve-button>button</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Dialog with different container styles, including custom padding and layout options.
<nve-dialog id="dialog" modal closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some overflow content</p>
<p nve-text="body" style="min-height: 1000px">some overflow content</p>
<nve-button>button</nve-button>
<nve-dialog-footer>
<nve-button id="cancel-btn">cancel</nve-button>
</nve-dialog-footer>
</nve-dialog>
Edit Example
Dialog with overflow content, including max-height constraints and a scrollable content area.
Legacy D O M Creation
test-case
<nve-button id="dialog-btn">button</nve-button>
<script type="module">
import "@nvidia-elements/core/dialog/define.js";
import "@nvidia-elements/core/button/define.js";
document.querySelector("#dialog-btn").addEventListener("click", () => {
const dialog = document.createElement("nve-dialog");
dialog.id = "dialog-dom-creation";
dialog.modal = true;
dialog.closable = true;
dialog.addEventListener(
"close",
() => {
document.body.removeChild(dialog);
},
{ once: true },
);
document.body.appendChild(dialog);
});
</script>
Edit Example
Center Alignment
test-case
<style>
body {
min-height: 200vh;
}
</style>
<nve-button popovertarget="dialog">button</nve-button>
<nve-dialog id="dialog" closable>
<nve-dialog-header>
<h3 nve-text="heading semibold">title</h3>
</nve-dialog-header>
<p nve-text="body">some text content in a closable dialog</p>
<nve-select>
<select aria-label="select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</nve-select>
</nve-dialog>
Edit Example
Center alignment with anchor body