Skip to main content

Button

Give the user a button that triggers an action on click.

Button component

Create a dynamic query editor

  1. Add a Code Editor component from the Components panel to the canvas
  2. In the Properties panel, change the Default Value to:
select * from orders
  1. Add a Table component from the Components panel to the canvas
  2. In the Properties panel, change the Table Data to a new API referencing the [Demo] Orders postgres database
  3. In the API step, add the following SQL query:
{{CodeEditor1.stringValue}}
  1. Add a Button component from the Components panel to the canvas
  2. Update the Button label to "Refresh"
  3. In the onClick section choose Run APIs as Action Type and API1 for APIs (executed in parallel)

Now, when you change the SQL query in the Code Editor and click Refresh, the table will re-populate accordingly!

Dynamic query editor example

Disable buttons based on other component's state

You can disable the button component based on the state of other component. This allows you to ensure the end user has properly filled out a form before being able to submit the data, for instance. Click on the "Code" button in the Properties Panel for a Button component to be able to use javascript within the component. The following code block is used in the below example:

{
{
(function () {
if (
DatePicker1.selectedDate &&
Input1.value &&
Dropdown1.selectedOptionValue
) {
return false;
} else {
return true;
}
})();
}
}
Button is disabled until form is filled out
Example of button enabling when form is filled out

Button Properties

Component Properties

PropertyDescription
LabelSets the label of the button
Button StyleChanges the style of the button, options are "Primary", "Secondary", or "Tertiary"
IconSelects an icon to be displayed in the dropdown input. If the selected option has its own icon, it will override this icon
Icon PositionSets the alignment of the icon
Text StyleChanges the style (font, size, etc.) of the button's text. Configure styles in the Typography settings
Text ColorChanges the color of the label
BackgroundChanges the color of the background
VisibleControls the visibility of the component, values are a boolean
DisabledDisables user interaction with this component, values are a boolean

Image showing the different button styles available:

Button styles

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Button component, and dot referencing the property. For a Button named Button1:

PropertyDescription
Button1.isVisibleReturns the boolean value of the button's visibility (True, if it is visible)
Button1.isDisabledReturns the boolean value of the button's disabled state (True, if it is disabled)
Button1.textReturns the button's label as a string

Events

The following events are triggered by user interactions with Button components. Use event handlers to trigger actions in response to user events.

Table Reference PropertyDescription
onClickTriggers an action when the button is clicked