Dialog

@ui5/webcomponents
<ui5-dialog>

Basic Dialog

Open Dialog
Register
<ui5-button id="openDialogButton" design="Emphasized">Open Dialog</ui5-button>

<ui5-dialog id="hello-dialog" header-text="Register Form">
	<section class="login-form">
		<div>
			<ui5-label for="username" required>Username: </ui5-label>
			<ui5-input id="username"></ui5-input>
		</div>

		<div>
			<ui5-label for="password" required>Password: </ui5-label>
			<ui5-input id="password" type="Password" value-state="Error"></ui5-input>
		</div>

		<div>
			<ui5-label for="email" type="Email" required>Email: </ui5-label>
			<ui5-input id="email"></ui5-input>
		</div>

		<div>
			<ui5-label for="address">Address: </ui5-label>
			<ui5-input id="address"></ui5-input>
		</div>
	</section>

	<div slot="footer"	class="dialog-footer">
		<div style="flex: 1;"></div>
		<ui5-button id="closeDialogButton" design="Emphasized">Register</ui5-button>
	</div>
</ui5-dialog>

<script>
	var dialogOpener = document.getElementById("openDialogButton");
	var dialog = document.getElementById("hello-dialog");
	var dialogCloser = document.getElementById("closeDialogButton");

	dialogOpener.addEventListener("click", function() {
		dialog.open();
	});

	dialogCloser.addEventListener("click", function() {
		dialog.close();
	});
</script>
	

Draggable and Resizable Dialog

Open Draggable/Resizable dialog

Resize this dialog by dragging it by its resize handle.

This feature available only on Desktop.

Move this dialog around the screen by dragging it by its header.

This feature available only on Desktop.

OK
<ui5-dialog draggable resizable></ui5-dialog>
	

Overview

The ui5-dialog component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The ui5-dialog interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The dialog combines concepts known from other technologies where the windows have names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.

The ui5-dialog is modal, which means that user action is required before returning to the parent window is possible. The content of the ui5-dialog is fully customizable.

Structure

A ui5-dialog consists of a header, content, and a footer for action buttons. The ui5-dialog is usually displayed at the center of the screen. Its position can be changed by the user. To enable this, you need to set the property draggable accordingly.

Responsive Behavior

The stretch property can be used to stretch the ui5-dialog on full screen.

ES6 Module Import

import "@ui5/webcomponents/dist/Dialog"; Note: We don't recommend nesting popup-like components (ui5-dialog, ui5-popover) inside ui5-dialog. Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
draggable
boolean
false
Determines whether the ui5-dialog is draggable. If this property is set to true, the Dialog will be draggable by its header.

Note: The ui5-dialog can be draggable only in desktop mode.
since v1.0.0-rc.9
headerText
header-text
string
""
Defines the header text.

Note: If header slot is provided, the headerText is ignored.
resizable
boolean
false
Configures the ui5-dialog to be resizable. If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages. In RTL languages, the resize handle will be placed in the bottom left corner.

Note: The ui5-dialog can be resizable only in desktop mode.
Note: Upon resizing, externally defined height and width styling will be ignored.
since v1.0.0-rc.10
stretch
boolean
false
Determines whether the ui5-dialog should be stretched to fullscreen.

Note: The ui5-dialog will be stretched to approximately 90% of the viewport.
_ariaLabel
_aria-label
undefined
Ensures ariaLabel is never null or empty string
_ariaLabelledBy
_aria-labelled-by
undefined
Return the ID of an element in the shadow DOM that is going to label this popup
_ariaModal
_aria-modal
undefined
Return the value for aria-modal for this popup
initialFocus
initial-focus
string
""
Defines the ID of the HTML Element, which will get the initial focus.
isModal
is-modal
undefined
Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)
preventFocusRestore
prevent-focus-restore
boolean
false
Defines if the focus should be returned to the previously focused element, when the popup closes.
since v1.0.0-rc.8

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the content of the Popup.
footer
HTMLElement [0..n]
Defines the footer HTML Element.
header
HTMLElement [0..n]
Defines the header HTML Element.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
after-close
Fired after the component is closed. This event does not bubble.
after-open
Fired after the component is opened. This event does not bubble.
before-close
Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
escPressed
type: Boolean
description: Indicates that ESC key has triggered the event.
before-open
Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel