Skip to main content

Button (AI Assistant)

Business

This page provides information on using the Button widget (available in AI Assistant Apps), which allows you to trigger actions or perform specific tasks with a single click.

Image

Content properties​

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Basic​

Label string​

Defines the text displayed on the button to indicate its purpose, such as "Submit" or "Cancel."

onClick​

Allows you to configure one or multiple actions (Framework functions, queries, or JS functions) to be executed when the button is clicked. You can chain multiple actions together, and all the nested actions would run simultaneously.

General​

General properties are essential configurations that provide overall control over the widget's behavior and appearance.

Tooltip string​

Displays a tooltip when the user hovers over the button, providing additional context or information about its functionality.

Visible boolean​

Controls the visibility of the widget. If you turn off this property, the widget is not visible in View mode. Additionally, you can use JavaScript by clicking on JS next to the Visible property to control the widget's visibility conditionally.

For example, if you want to make the button visible only when the user selects "Yes" from a Select widget, you can use the following JavaScript expression:

{{Select1.selectedOptionValue === "Yes"}}

Disabled boolean​

Prevents users from selecting the widget. Even though the widget remains visible, user input is not permitted. Additionally, you can use JavaScript by clicking on JS next to the Disabled property to control the widget's disabled state conditionally.

For example, if you want to allow only a specific user to click the button, you can use the following JavaScript expression:

{{appsmith.user.email=="john@appsmith.com"?false:true}}

Animate Loading boolean​

Controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property.

Validation​

Google reCAPTCHA key​

Add a Google reCAPTCHA site key to enable reCAPTCHA verification for the button, which helps protect your application from spam and automated bots. You can use the recaptchaToken reference property to retrieve the token.

See how to configure Google reCAPTCHA Keys.

Google reCAPTCHA version​

Select the reCAPTCHA version (v2 or v3) that matches the configuration set for your site key in your Google reCAPTCHA settings.

  • reCAPTCHA v2 requires user interaction, such as clicking a checkbox to confirm that they are human.

  • reCAPTCHA v3 works in the background without requiring user interaction, scoring user behavior to assess whether the user is likely to be human or a bot.

Style properties​

Style properties allow you to change the look and feel of the button.

General​

General properties are essential configurations that provide overall control over the widget's behavior and appearance.

Button variant string​

Specifies the style type of the button to indicate its significance. You can choose from the following options:

Options:

  • Filled: A solid button with a background color, typically used for primary actions or important buttons.
  • Outlined: A button with only a border and no background, used for secondary actions or less important buttons.
  • Subtle: A button with minimal styling, often used for less prominent actions, providing a cleaner and more subtle look.
  • Ghost: A button with no visible border or background, ideal for actions that are even more subtle or when you want to maintain a clean, unobtrusive interface.

This property can also be dynamically set using JS, allowing you to change the button's appearance based on conditions or user interactions.

Button color string​

Specifies the color of the button to emphasize its importance or action. You can select from the following predefined color options:

  • Accent: Uses the accent color from the app theme. You can change the accent color from the app theme settings.
  • Neutral: Uses a neutral color, which is black for light theme and white for dark theme.
  • Positive: Uses a green shade to indicate positive values. The color cannot be customized.
  • Negative: Uses a red shade to indicate negative values. The color cannot be customized.
  • Warning: Uses an orange shade to indicate caution or warnings. The color cannot be customized.

You can enable JS to dynamically update the color. The value should be one of the predefined options such as accent, neutral, positive, negative, or warning. You cannot set a custom color directly for this widget. To change the color, you can adjust it through the app theme settings.

Example: If you want to change the button color based on whether a checkbox is checked or not, use the following JS expression:

{{ Checkbox1.isChecked ? "positive" : "negative" }}

Icon string​

Allows you to set an icon for the Button widget. You can choose from a predefined list of available icons. By enabling JS, you can dynamically change the icon based on data or user interactions.

Example: If you want to change the button's icon based on whether a checkbox is checked or not, use the following JS expression:

{{ Checkbox1.isChecked ? "check" : "alert-circle" }}

Position​

Specifies the alignment of the icon relative to the button label. You can set it to one of the following values:

  • Left: Aligns the icon to the left of the label on the button.
  • Right: Aligns the icon to the right of the label on the button.

Reference properties​

Reference properties enable you to access the widget's data and state using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to retrieve the visibility status of a button widget, you can use Button1.isVisible.

text string​

Returns the value of the button's label property.

Example:

{{Button1.text}}

isVisible boolean​

Indicates the visibility state of a widget, with true indicating it is visible and false indicating it is hidden.

Example:

{{Button1.isVisible}}

isDisabled boolean​

It reflects the state of the widget's Disabled setting. It is represented by a boolean value, where true indicates that the widget is disabled, and false indicates that it is enabled for user interaction.

Example:

{{Button1.isDisabled}}

recaptchaToken string​

Returns the token generated by Google reCAPTCHA for the button widget. This token can be used to validate the user's interaction with the reCAPTCHA service, ensuring that the user is human and not a bot. The token is typically used on the server side to verify the authenticity of the reCAPTCHA response.

{{Button1.recaptchaToken}}

See How to Configure Google reCAPTCHA.

Methods​

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous and return a Promise. You can use the .then() block to ensure execution and sequencing of subsequent lines of code in Appsmith.

setVisibility (param: boolean): Promise​

Sets the visibility of the widget.

Example:

Button1..setVisibility(true)

setDisabled (param: boolean): Promise​

Sets the disabled state of the widget.

Example:

Button1.setDisabled(false)

setLabel (param: string): Promise​

Sets the label of the button widget.

Example:

Button1.setLabel('Click me!')