Dialog

shadow

The Dialog element displays a dialog box with customizable content. It can be used, for example, to simply display information to the user or to request confirmation or cancellation of an action taken by the user. It is located above the application content and must be manually dismissed by the user in order to continue interacting with the application. The dialog can be displayed in different screen sizes and positions.

Basic usage

One way to display the 'Dialog' component is to use the 'Button' component with the 'dialog' attribute. For more information about the 'Button' component, go to Button.

Basic use with JavaScript

It is also possible to display the Dialog component using JavaScript. The onOpen() method, which is called on the wje-dialog element, is used to create a dialog box. This method displays a dialog box and returns its instance. To close a dialog box, you need to call the onClose() method on its instance.

Placement

The placement property specifies the placement of the dialog box on the screen. The default is slide-up. Other options are "stick-up", "fill-in", "slide-left", "slide-right".

Size

The size property adjusts the size of the dialog box on the screen. The default size is "small". Other options are "medium", "large" and "ex-large".

Dynamic content change

The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.

Registering a Blocking Event

The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.

When to use

Use wje-dialog to communicate status, result of actions, or required next steps immediately.

When not to use

Do not show multiple feedback channels for the same event unless there is a strong reason.

Accessibility

Announce status updates with suitable ARIA live regions and manage focus for modal interactions.

Best Practices

• Match message severity (info/success/warning/error) to actual user impact.
• Use confirmations only for destructive or hard-to-reverse actions.
• Keep timeouts consistent so users have enough time to read messages.

Attributes and Properties

No properties available for this component.

Events

No events available for this component.

Methods

htmlDialogBody

Description	Creates the dialog body.
Signature	(dialog: any) => void

close

Description	Closes the dialog.
Signature	(e: any) => void

beforeOpen

Description	Before the dialog opens.
Signature	(dialog: any, trigger: any) => void

afterOpen

Description	After the dialog opens.
Signature	(dialog: any, trigger: any) => void

beforeClose

Description	Before the dialog closes.
Signature	(dialog: any, trigger: any) => void

afterClose

Description	After the dialog closes.
Signature	(dialog: any, trigger: any) => void

registerBlockingEvent

Description	Registers an event listener on the provided button that triggers a blocking UI element and executes a given promise when the button is clicked.
Signature	(button: HTMLElement, promise: Function) => void

updateHasFooter

Description	Updates has footer using the latest component data.
Signature	() => void

CSS Shadow Parts

Name	Description
dialog	The dialog wrapper.
header	The header of the dialog.
body	The body of the dialog.
footer	The footer of the dialog.
close	The close button of the dialog.

CSS Custom Properties

Name	Description
--wje-dialog-background	Specifies the background color of the dialog.
--wje-dialog-color	Defines the text color within the dialog.
--wje-dialog-padding	Controls the padding inside the dialog.
--wje-dialog-border-radius	Sets the border radius for the dialog's corners.
--wje-dialog-box-shadow	Applies a shadow effect to the dialog.

Slots

Name	Description
header	Slot for the header content.
body	Slot for the body content.
footer	Slot for the footer content.