Dialog
The dialog component is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.
That is, users cannot interact with content outside an active dialog window.
| Name | Description | Default | Control |
|---|---|---|---|
| slots | |||
Default slot for the dialog content. | - | - | |
| attributes | |||
| type | modal: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with. The tab sequence is kept within the dialog and moving the focus outside the dialog will imply closing it. This is the default type of the component.non-modal: When a non-modal dialog is open, the rest of the page is not dimmed out and users can interact with the rest of the page. This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.alert: A special type of modal dialog that interrupts the users workflow to communicate an important message or ask for a decision. Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog, and it cannot be dismissed through the dimmed background. | modal | |
Stories
Default
The dialog component is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.
That is, users cannot interact with content outside an active dialog window.
Modal Type
A modal is a type of dialog that temporarily halts the main workflow to convey a significant message or require user interaction. By default, interactions such as clicking outside the dialog or pressing the Escape key will close the modal-dialog, resuming the user's interaction with the main content.
type="modal"
Non-modal Type
A non-modal dialog by default presents no backdrop, allowing elements outside of the dialog to be interacted with. A non-modal dialog will present by default a closeButton.
Note: if an element outside of the dialog is focused then it will not be possible to close the dialog with the Escape key.
type="non-modal"
Alert Type
An alert is a type of modal-dialog that interrupts the user's workflow to communicate an important message and acquire a response. By default clicking on backdrop and pressing Escape will not dismiss an alert dialog.
type="alert"
Actions
A dialog should have no more than two actions.
However, if required, you can populate the action slot with any number of buttons as needed.
Custom Title Action
By default a non-modal dialog renders a dismiss button with a close icon.
The
title-action
slot can be customized to add a different kind of action. Custom title actions can be used in any kind of
dialog. Here's an example which replaces the default close icon with a
<fluent-button>
and a custom icon. Clicking the button will trigger a JavaScript alert.
No Title Action
The
no-title-action
attribute can be provided to opt out of rendering any title action.
no-title-action
Modal With No Title Or Actions
A dialog without a title or actions will render a close button by default.
Non Modal With No Title Or Actions
A non-modal dialog without a title or actions will render a close button by default.
Alert With No Title Or Actions
An alert dialog without a title or actions will not render a close button.
Focus the dialog by clicking or tabbing to it and press the Escape key to dismiss it.
Two Column Layout
The dialog is designed with flexibility in mind, accommodating multiple column layouts within its structure.
Scrolling Long Content
By default content provided in the default slot should grow until it fits viewport size. Overflow content will be scrollable. This story's content is vertically clamped to demonstrate the scrolling behavior.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lectus non lorem iaculis luctus. Proin ac dolor eget enim commodo pretium. Duis ut nibh ac metus interdum finibus. Integer maximus ante a tincidunt pretium. Aliquam erat volutpat. Sed nec ante vel lectus dignissim commodo id ut elit. Curabitur ullamcorper sapien id mauris interdum, ac placerat mi malesuada. Duis aliquam, dolor eget facilisis mollis, ante leo tincidunt quam, vel convallis ipsum turpis et turpis. Mauris fermentum neque nec tortor semper tempus. Integer malesuada, nunc ac cursus facilisis, lectus mauris interdum erat, in vulputate risus velit in neque. Etiam volutpat ante nec fringilla tempus. Quisque et lobortis dolor. Fusce sit amet odio sed ipsum fringilla auctor. Suspendisse faucibus tellus in luctus hendrerit. Vestibulum euismod velit non laoreet feugiat. Nam sit amet velit urna. Cras consectetur tempor sem, in suscipit sem ultrices id. Vivamus id felis fringilla, scelerisque nulla non, aliquam leo. In pharetra mauris ut enim ullamcorper, id suscipit quam ullamcorper. Quisque tincidunt, felis nec congue elementum, mauris est finibus ex, ut volutpat ante est nec est. Aliquam tempor, turpis ac scelerisque dignissim, metus velit rutrum sem, eget efficitur mauris erat in metus. Vestibulum in urna massa. Donec eleifend leo at dui convallis aliquet. Integer eleifend, velit ut consequat tempus, enim elit ultricies diam, at congue enim enim id nunc. Nullam fringilla bibendum nulla, at lacinia sem bibendum eget. Nunc posuere ipsum sed enim facilisis efficitur. Pellentesque id semper mi, a feugiat sem. Nunc interdum, leo ut tincidunt consectetur, nunc mauris accumsan nulla, vel ultricies velit erat nec sapien. Praesent eleifend ex at odio scelerisque cursus. Morbi eget tellus sed sapien scelerisque cursus at a ante. Sed venenatis vehicula erat eu feugiat. Ut eu elit vitae urna tincidunt pulvinar nec at nunc. Vestibulum eget tristique sapien. Sed egestas sapien vel ante viverra pharetra. Cras sit amet felis at nulla tincidunt euismod vitae et justo. Duis nec rutrum lectus, nec lobortis quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac ex condimentum, consectetur felis non, maximus odio. Sed mattis arcu id justo fringilla, a tristique purus vestibulum. Nulla nec fringilla quam. Sed ac elit ac sem posuere cursus nec vitae mauris. Suspendisse nec pulvinar risus. Sed a tincidunt elit, in gravida tortor. Quisque sollicitudin lectus vel interdum tempor. Fusce dictum fermentum sem sed suscipit. Vivamus sollicitudin ex turpis, sit amet consequat leo auctor at. Donec fermentum aliquet lectus, sit amet efficitur nibh pellentesque et. Curabitur dapibus quam vitae lectus pellentesque, vitae varius massa facilisis. Quisque consectetur eros a arcu cursus fringilla. Fusce efficitur auctor nibh, nec sollicitudin eros semper eget. Cras a elit ut tortor semper volutpat eu vel nunc. Duis dapibus quam risus, ac tristique nisl aliquam eu. Curabitur vel ipsum non nunc euismod fringilla vel a lorem. Curabitur viverra magna ac justo fringilla, eu vestibulum purus finibus. Donec elementum volutpat libero, in tempus massa convallis vitae. Curabitur vitae mauris id urna dictum pharetra. Nullam vehicula arcu arcu, vitae elementum enim tincidunt at. Duis eleifend, lorem a efficitur facilisis, nulla dolor finibus orci, et ullamcorper orci ex ac purus. Aenean sem lectus, malesuada id magna id, facilisis condimentum nibh. Cras tempor neque mi, sit amet suscipit libero consectetur non. Nullam id eleifend mauris. Mauris iaculis lectus eu scelerisque efficitur. In id suscipit libero. Donec condimentum, purus ac laoreet facilisis, risus lorem facilisis neque, id volutpat felis mi eget metus. Nulla facilisi. Donec consequat tincidunt nunc sed elementum. Integer consectetur tristique orci, ut congue justo pellentesque eu. Fusce faucibus iaculis mauris, eu lobortis orci egestas eget. Nullam nec arcu bibendum, cursus diam ac, facilisis enim. Nulla facilisi. Curabitur lacinia odio mauris, a gravida nisi volutpat in. Aliquam at maximus felis. Vestibulum convallis dignissim urna id gravida.