Skip to main content

Button (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Button widget runs an action when users click it. Use it to run a query, open a modal, or submit a form. It can also protect the action with Google reCAPTCHA.

Widget type: WDS_BUTTON_WIDGET

Button widget in a Responsive app
Button widget

Content properties​

These properties appear in the Content tab of the property pane.

Basic​

Label string​

Sets the text on the button. Default: Do something.

General​

Tooltip string​

Shows helper text when users hover over the button.

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Stops users from clicking the button. Default: off.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Validation​

This section is hidden on air-gapped instances.

Google reCAPTCHA key string​

Sets the Google reCAPTCHA site key for the button. When you set a key, the button gets a reCAPTCHA token before it runs onClick. You can read the token in the recaptchaToken reference property.

  • With reCAPTCHA v3, if the key contains a double quote ("), the widget ignores it.
  • If the key is wrong, or belongs to a different domain, the app shows an error message. The onClick action still runs.
  • reCAPTCHA v3 loads its script from https://www.google.com/recaptcha/api.js.

Google reCAPTCHA version string​

Sets the reCAPTCHA version. Options:

  • reCAPTCHA v3 (default)
  • reCAPTCHA v2. The v2 check is invisible to users.

Form settings​

These settings work when the button is inside a zone that has Use as a form turned on.

Disable when form invalid boolean​

Disables the button while any field in the form is invalid. Default: off.

Reset form on success boolean​

Resets the form fields after the onClick action succeeds. If onClick is empty, the button resets the form when clicked. Default: off.

Style properties​

These properties appear in the Style tab of the property pane.

General​

Button variant string​

Sets the look of the button. Options: Filled (default), Outlined, Subtle, Ghost.

Values for code: filled, outlined, subtle, ghost.

Button color string​

Sets the semantic color of the button. Options: Accent (default), Neutral, Positive, Negative, Warning.

Values for code: accent, neutral, positive, negative, warning.

Icon​

Select icon string​

Sets an icon to show on the button.

Position string​

Sets where the icon appears. Options: start (default) or end. You cannot bind this property.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Button1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Button1.isVisible}}

text string​

Holds the button label.

Example:

{{Button1.text}}

isDisabled boolean​

Shows whether the button is disabled.

Example:

{{Button1.isDisabled}}

recaptchaToken string​

Holds the reCAPTCHA token from the last click. It is empty until a reCAPTCHA check succeeds. Send it to your server to verify the user.

Example:

{{Button1.recaptchaToken}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Button1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the button on or off.

Example:

Button1.setDisabled(true)

setLabel (param: string): Promise​

Sets the button label.

Example:

Button1.setLabel("Save")

setColor (param: string): Promise​

Sets the button color. Use one of accent, neutral, positive, negative, or warning.

Example:

Button1.setColor("negative")

Events​

onClick​

Runs when users click the button. The button shows a loading state until the action finishes. If a reCAPTCHA key is set, the action runs after the token is ready.