Modal

The modal is container called by a button. Once you click on the button, a modal will appear on which you can display other components.

The following section details Modal component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:

App Editor Documentation

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps Quickstart

Learn how to build your first app in a matter of minutes.

Modal configuration

Name	Type	Connectable	Templatable	Default	Description
modalTitle	string	false	false	Modal title	The title of the modal.
buttonLabel	string	true	false	Press me	The button label.
buttonColor	blue, red, dark, light, green, gray, none	false	false	blue	The button color.
buttonSize	xs, sm, md , lg, xl	false	false	xs	The button size.
buttonFillContainer	boolean	false	false	false	Whether the button should fill the container.
buttonDisabled	boolean	false	false	false	Whether the button should be disabled.

Controls

This component can be controlled by frontend scripts using these functions:

Name	Parameters	Description	Example
open	id: string	Open the drawer.	open('a')
close	id: string	Close the drawer.	close('a')

Event handlers

The modal component has the following event handlers:

• onOpen: Trigger a runnable when the drawer is opened.
• onClose: Trigger a runnable when the drawer is closed.

Multiple runnables can be added to each event handler.