Skip to content
On this page

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").

When open, the Dialog adds a class to the document body to prevent scrolling; this is applied whether or not teleport is used.

Attributes passed to inner element

This component forwards any attributes applied by the user to the inner .cdx-dialog element, instead of applying them to the outermost backdrop element.

Dialog and <teleport>

Dialogs rely on Vue's built-in <teleport> feature, and a "target" prop can be supplied which will be passed to the teleport's to prop. This prop is optional and defaults to the <body> element on the page (although if Dialog is being used with SSR, a dedicated target should be provided).

An alternative default target can be set using Vue's provide/inject feature, with provide( 'CdxTeleportTarget', '#my-teleport-target' ). This provided target will be used if the "target" prop is not set.

Finally, Dialog teleportation behavior can be disabled by setting renderInPlace: true.

The examples on this page are all wrapped with Vitepress's built-in <client-only> component, since the Codex documentation site (built with Vitepress) uses SSR. Other SSRed applications will need to do something similar (only rendering Dialog after the mounted hook has been fired, etc.).

Use of the Dialog component in features which don't rely on SSR (which includes all MediaWiki usage for now) can dispense with this.

Demos

Configurable Dialog

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.

With stacked actions

When action button text is long, use the stackedActions prop to stack the action buttons vertically.

The footer-text slot can accept plain text, links, and basic formatting markup; do not use it to provide images or block-level elements. All content provided is wrapped inside of a <p> tag. Use this slot for situations like showing a disclaimer, linking to help or legal documentation, etc. The footer-text content will appear above the dialog actions.

By default, the Dialog displays a header with an optional title, subtitle, and close button, and a footer with optional buttons and footer text.

The entire content of the header and footer can be replaced with user-provided markup (by using the #header and #footer slots, respectively). This allows for the creation of one-off custom dialogs as well as variant Dialog components that wrap the base Dialog with some additional content and styling.

Reusable custom Dialog example

The example above demonstrates a unique Dialog instance, suitable for a one-off dialog. For a re-usable custom dialog, consider using a wrapper component.

A wrapper component could pre-apply certain customizations (a consistent custom header or footer, for example) while still accepting <slot> content from the user that gets forwarded to the Dialog's own slots.

An example of how to write such a component can be found below. This example relies on Codex's useModelWrapper composable to pass a v-model binding from the parent context down to the inner Dialog component.

Usage of the custom component would look like this:

vue
<wrapped-dialog
  title="Custom dialog header"
  v-model:open="wrappedDialogState"
>  
	Custom dialog content.  
</wrapped-dialog>

Usage

Props

Prop nameDescriptionTypeDefault
openWhether the dialog is visible. Should be provided via a v-model:open binding in the parent scope.booleanfalse
title(required)Title for the dialog header. Used for ARIA purposes even if no visible header element is displayed.string
subtitleOptional subtitle for the dialog.stringnull
hideTitleWhether the dialog header should hide the title & subtitlebooleanfalse
closeButtonLabelLabel for the icon-only close button in the header.

Including this prop adds the close button.
string''
primaryActionPrimary user action. This will display a primary button with the specified action (progressive or destructive).PrimaryDialogActionnull
defaultActionDefault user action. This will display a normal button.DialogActionnull
stackedActionsWhether action buttons should be vertically stacked and 100% width.booleanfalse
targetSelector or DOM element identifying the container the dialog should be rendered in. The dialog will be <teleport>ed to this element. An ID selector is recommended, e.g. #foo-bar, but providing an actual element is also supported.

If this prop is not set, and the parent or one of its ancestors provides a teleport target using provide( 'CdxTeleportTarget', '#foo-bar' ), the provided target will be used. If there is no provided target, the dialog will be teleported to the end of the <body> element.
string|HTMLElement|nullnull
renderInPlaceWhether to disable the use of teleport and render the Dialog in its original location in the document. If this is true, the target prop is ignored.booleanfalse

Events

Event namePropertiesDescription
primaryWhen the primary action button is clicked.
defaultWhen the default action button is clicked.
update:opennewValue 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

NameDescriptionBindings
headerCustomizable Dialog header
defaultDialog content
footerCustomizable Dialog footer
footer-textOptional footer text