Button

Button component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.

Properties

Property	Description	Expected Value
Label	Text to display on the button.	String (e.g., `Submit`).

Event	Description
On click	Triggers whenever the user clicks the button.
On hover	Triggers whenever the user moves the mouse cursor over the button.

info

Check Action Reference docs to get detailed information about all the Actions.

Property	Description	Expected Value
Button text	Used to set the label of the button.	Any String value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}`.
Loading state	The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run.	Toggle the switch On or click on fx to programmatically set the value to `{{true}}` or `{{false}}`.

Following actions of Button component can be controlled using the component specific actions(CSA):

Actions	Description	How To Access
click()	Regulate the click of the button.	Employ a RunJS query to execute component-specific actions such as `await components.button1.click()` or trigger it using an event.
setText()	Sets the label of the component.	Employ a RunJS query (for e.g., `await components.button1.setText('Update')`) or trigger it using an event.
setVisibility()	Sets the visibility of the component.	Employ a RunJS query (for e.g., `await components.textinput1.setVisibility(false)`) or trigger it using an event.
setLoading()	Sets the loading state of the component.	Employ a RunJS query (for e.g., `await components.button1.setLoading(true)`) or trigger it using an event.
setDisable()	Disables the component.	Employ a RunJS query (for e.g., `await components.button1.setDisable(true)`) or trigger it using an event.

Variable	Description	How To Access
buttonText	This variable stores the text displayed on the button.	Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}`.
isValid	Indicates if the input meets validation criteria.	Accessible dynamically with JS (for e.g., `{{components.button1.isValid}}`).
isLoading	Indicates if the component is loading.	Accessible dynamically with JS (for e.g., `{{components.button1.isLoading}}`).
isVisible	Indicates if the component is visible.	Accessible dynamically with JS (for e.g., `{{components.button1.isVisible}}`).

Action	Description	Configuration Options
Loading state	Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Disable	Enables or disables the component. Toggle or set dynamically.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover. Set a string value for display.	String (e.g., `Button to Submit Form` ).

Property	Description	Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Button Property	Description	Configuration Options
Type	Sets the fill value of the Button component.	Select `Solid` for a button with a solid background and `Outline` for a transparent button with an outline.
Background	Sets the background color of the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Text color	Sets the text color of the text entered in the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Border color	Sets the border color of the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Loader color	Sets the loader color of the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Icon	Allows you to select an icon for the component.	Enable the icon visibility, select icon and icon color. Alternatively, you can programmatically set it using fx.
Border radius	Modifies the border radius of the component.	Enter a number or click on fx and enter a code that programmatically returns a numeric value.
Box shadow	Sets the box shadow properties of the component.	Select the box shadow color and adjust the related properties or set it programmatically using fx.

Padding
Allows you to maintain a standard padding by enabling the Default option.