Dialog

The Dialog element (also known as Modal) is a UI component that overlays content on top of the page, requiring user interaction before returning to the parent interface. Dialogs are typically used for tasks such as:

• Displaying alerts or confirmations
• Collecting input (forms, fields)
• Showing additional details without navigating away

Dialogs in Etch are implemented as components with accessible markup and managed focus. The dialog remains hidden until triggered (for example, by a button or another user interaction). When visible, it captures focus and disables interaction with the background content (often by using an overlay).

Key features of the Dialog element:

• Can be opened and closed programmatically or by user action
• Supports keyboard accessibility (including focus trap and Escape key to close)
• Content is added inside a dedicated dialogcontent slot, allowing for flexible composition (text, images, forms, etc.)
• Includes an overlay to dim the rest of the page and focus attention on the dialog
• Fully customizable: you can edit styles, structure, and triggers within Etch

In Etch, use the Dialog when you want to present important information or gather information from the user, while temporarily interrupting the main workflow in a focused manner.

Setup

• Add a container or a flex-div on your site if you don't already have one.
• You'll paste the Dialog component into the container or flex-div in the next step.

Importing the Component

Use the button below to copy the ready-to-use Dialog component as JSON. Then, in Etch, press cmd + v (Mac) or ctrl + v (Windows) anywhere in the builder to insert the component.

Steps

• Click "Copy Dialog Component" above, then in Etch press cmd + v (Mac) / ctrl + v (Windows) anywhere in the builder to insert the component
• Arrange the component inside your container or flex-div.
• Verify the component.

Configuration

• CSS, JS, and props are bundled inside the component—no setup required. You can edit prop values to customize behavior.
• Styling: tweak CSS variables on .etch-modal (e.g., colors, icon sizes).
• Fill the props in the Elements Settings panel.

Editing the Dialog

Dialog comes with 1 slot, if you open the dialog and you don't see the slot, you will need to add it.

Adding the slot ( if the slot is not already there )

Once you select the dialog, on the bottom bar where all the elements are, you will see 1 slot icons on the left, click on it and you should see the slot appear on the dialog.

Now your dialog should contain 1 slot named dialogcontent

Adding content to the slot

• You can add content to the dialog by adding content to the slot.
• dialogcontent slot is the content that will be displayed in the dialog.
  • You can add any content to the slot.
  • You can add text, images, create cards, use divs, the slot is a normal div container.

tip

You can edit the content while the dialog is open by adding Switching (Show / Hide Editor).

Adding a trigger to the dialog

Lets select the dialog component and see the Elements Settings panel.

On that Panel there will be a prop called triggerSelector, type there a .class or an #id from the element that you want to trigger the dialog from.

Dialog Component Props

Option	Type	Default	Description
showEditor	boolean	true	Used internally to hide / show the dialog in Etch Editor.
closeMethod	select	any	The method to close the dialog.
• any			Any (Allow all methods)
• closerequest			Close Request (Esc key or developer action)
• none			None (Only developer-defined actions)
triggerSelector	string	.open-dialog	The selector of the trigger element, must be a .class or #id of an element on the page
dialogPlacement	select	center	The placement of the dialog.
• center			Positions the dialog in the center of the screen
• center-left			Positions the dialog to the left of the screen
• center-right			Positions the dialog to the right of the screen
• top-left			Positions the dialog to the top left of the screen
• top-center			Positions the dialog to the top center of the screen
• top-right			Positions the dialog to the top right of the screen
• bottom-left			Positions the dialog to the bottom left of the screen
• bottom-center			Positions the dialog to the bottom center of the screen
• bottom-right			Positions the dialog to the bottom right of the screen
• custom		custom	removes any positioning and allows you to set the dialog to a custom position with CSS or any other method
closeButtonType	select	icon	The type of close button if any
• Label			Button with label only
• Icon			Button with icon only (SVG by default)
• Label + Icon			Button with label and Icon
• none			Without Close button
closeButtonLabel	string	Close	Text for the close button
dialogId	string	etch-dialog	The unique id of the Dialog. This is required to have multiple dialogs on the same page, must be alphanumeric and unique.
maxWidth	string	400px	The maximum width for the Dialog, sets scoped variable inline
dialogBackgroundColor	string	white	The background color for the Dialog body, sets scoped variable inline
dialogBackdropColor	string	rgba(0, 0, 0, 0.5)	The background color for the Dialog backdrop, sets scoped variable inline
dialogPadding	string	1em	Padding for the Dialog
isInLoop	boolean	false	Declares if the Dialog is being used inside a loop

Close Method

tip

For more information about Close Method on Dialogs refer to: Dialog closedby attribute