Dialog
A modal element that presents relevant information or actions.
The Dialog overtakes the user's entire viewport until it is dismissed, preventing mouse and keyboard interaction with other parts of the page while open. This is a significant interruption in the user experience, so this component should be used with care.
The parent component controls whether the Dialog is open via v-model:open
.
A Dialog can offer two kinds of actions (represented by buttons of the appropriate type): primary action (can be progressive or destructive), and default action (typically a safe option like "cancel").
The Dialog component can either be used on its own (in which case it displays in-place, using CSS positioning and z-index to overlay the rest of the viewport), or it can be used along with Vue's built-in <teleport>
component to move the component elsewhere in the DOM. This latter approach may be useful when Dialog is embedded in a large/complex page with other absolutely-positioned elements near the end of the markup.
When open, the Dialog adds a class to the document body to prevent scrolling; this is applied whether or not teleport is used.
Demos
Configurable Dialog
Name | Value |
---|---|
Props | |
title | |
hideTitle | |
closeButtonLabel | |
showDividers | |
stackedActions | |
usePrimaryAction | |
primaryActionLabel | |
primaryActionType | |
primaryActionDisabled | |
useDefaultAction | |
defaultActionLabel | |
defaultActionDisabled | |
Slots | |
default | |
View | |
Reading direction |
Basic example
This example includes a title, close button label (which enables the appearance of the icon-only close button), primary action, and default action.
With expandable menus
Expandable menus, like the one used by the Select component, will extend past the end of the dialog frame (instead of being cut off by it).
With overflowing content
When content in the default slot (the dialog body) is longer than the available space, the body section will scroll while the dialog header and footer will remain in view. Use the showDividers
prop to add dividers between the header, body, and footer of the dialog.
With stacked actions
When action button text is long, use the stackedActions
prop to stack the action buttons vertically.
Usage
Props
Prop name | Description | Type | Default |
---|---|---|---|
open | Whether the dialog is visible. Should be provided via a v-model:open binding in the parent scope. | boolean | false |
title (required) | Title for the dialog header | string | |
hideTitle | Whether the dialog title should be visually hidden | boolean | false |
closeButtonLabel | Label for the icon-only close button in the header. Including this prop adds the close button. | string | '' |
primaryAction | Primary user action. This will display a primary button with the specified action (progressive or destructive). | PrimaryDialogAction | null |
defaultAction | Default user action. This will display a normal button. | DialogAction | null |
stackedActions | Whether action buttons should be vertically stacked and 100% width. | boolean | false |
showDividers | Whether the dialog should display dividers between header, footer, and body sections. | boolean | false |
Events
Event name | Properties | Description |
---|---|---|
primary | When the primary action button is clicked. | |
default | When the default action button is clicked. | |
update:open | newValue boolean - The new open/close state (true for open, false for closed) | When the open/close state changes, e.g. when the close button is clicked. |
Slots
Name | Description | Bindings |
---|---|---|
default | Dialog content |