Skip to main content


The component triggers a runnable when clicked. If the runnable has parameters, they need to be configured in the component configuration. The runnable parameters are defined:

  • Static: the parameter is defined in the component configuration.
  • Connected: the parameter is connected to an output.

Button API

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

Button configuration

labelstringtruefalsePress meThe button label.
colorblue, red, dark, light, green, grayfalsefalseblueThe button color.
sizexs, sm, md , lg, xlfalsefalsesmThe button size.
Fill containerbooleanfalsefalsefalseWhether the button should fill the container.
disabledbooleanfalsefalsefalseWhether the button should be disabled.
Before IconstringfalsefalseUndefinedThe icon to display before the label.
After IconstringfalsefalseUndefinedThe icon to display after the label.
Trigger on App loadbooleanfalsefalsefalseWhether the button script should be triggered on app load.

Special parameters:

Button On Success

The button component has a special parameter called On Success. This parameter is used to trigger one of the following actions:

  • Do nothing: the button does nothing after the runnable is executed.
  • Go to an URL: the button redirects the user to the specified URL after the runnable is executed.
  • Set the tab of a Tabs component: the button sets the tab of a Tabs component after the runnable is executed.
  • Display a toast: the button displays a toast after the runnable is executed.

Go to an URL configuration

URLstringtruefalse/apps/get/fooThe URL to redirect the user to.
New TabbooleanfalsefalsetrueWhether the URL should be opened in a new tab.

Set the tab of a Tabs component configuration

Set TabArray<{id: string, index:number}>falsefalse[]The tabs to set. The id is the id of the Tabs component and the index is the tab index.

Display a toast configuration

MessagestringtruefalseHello thereThe message to display in the toast.


resultanyThe result of the runnable.
loadingbooleanThe loading state of the button.
jobIdstringThe job id of the runnable.

Event handler

The button component has the following event handler:

  • onSuccess: Trigger one or more runnables when the button is clicked and the runnable is successful.