Skip to main content

Button

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:

Controls

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

NameParametersDescriptionExample
recomputeid: stringRecompute a component.recompute('a');

Button configuration

NameTypeConnectableTemplatableDefaultDescription
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

NameTypeConnectableTemplatableDefaultDescription
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

NameTypeConnectableTemplatableDefaultDescription
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

NameTypeConnectableTemplatableDefaultDescription
MessagestringtruefalseHello thereThe message to display in the toast.

Outputs

NameTypeDescription
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.