Button & Button Group

The Button block renders a clickable button that runs actions when pressed. It has three behaviors — Default (runs your wired interactions), Submit, and Reset (which act on a Form block you select). Its label is bindable and translatable, with full appearance control: color, size, variant, start/end icons, and reactive Loading and Disabled conditions. Two add-ons extend it — a Tooltip on hover and Google reCAPTCHA verification.

Tip: When to use Button: Trigger any action on click — API call, modal, navigation, automation — with Behavior = Default. To submit or reset a form, set Behavior = Submit or Reset. For icon-only controls, use Icon Button. For related actions as one unit, use Button Group.

Properties

Content

Appearance

Events

Methods

Exposed State

Behavior & Gotchas

Warning: reCAPTCHA, hover and the tooltip don't work in a mobile app. On native mobile, the button falls back to a plain click. On Mouse Enter, the Tooltip add-on and reCAPTCHA are web-only. On Long Press is the opposite: it fires only on mobile and tablet devices, and does nothing on desktop.

Warning: Set Disabled wins over your Disabled condition. Once Set Disabled runs, the button's disabled state is fixed to that boolean and ignores the Disabled condition until Set Disabled is called again.

Note: With reCAPTCHA on, the first click verifies — it does not run your action yet. The button shows a spinner, the challenge runs, and only after a token is returned does On Click fire. Later clicks fire immediately using the cached token.

Note: Submit and Reset do nothing until you pick a form. Without a form selected in "Form to submit / reset," clicking submits or resets nothing.

Note: A long press swallows the following click. On mobile, after a long press fires, the click that would follow is suppressed — you won't get both events from one gesture.

Button Group

The Button Group block renders a set of related buttons as one unit, in one of three types: Default (buttons side by side, each with its own click action), Dropdown (a single button that opens a menu of options), and Toggle (a segmented control where exactly one option stays selected). Buttons come from a Manual list or are Mapped from a data source.

Tip: When to use Button Group: Offer a small set of related actions together (approve / reject / escalate), collapse many actions behind one dropdown button, or build a view switcher toggle. For a single action, use the Button block.

Properties

Content

Per-Button Settings (Manual mode)

Each button in the Manual list opens its own detail panel with: Label, Start/End Icons, Tooltip, Loading and Disabled conditions, On Click interactions, Visibility, and Permissions.

Appearance

Events

Methods

Exposed State

Behavior & Gotchas

Warning: A toggle group selects a button on page load — and fires its On Click. The auto-selection fires the On Click actions of the initially selected button on every page load. That is the first button, unless Initial Selected Item is set. Avoid placing load-sensitive logic (navigation, mutations) on that button.

Warning: The whole block disappears when no buttons survive. If every button is hidden by visibility or permissions, or a Mapped group's data is empty, the block renders nothing at all.

Note: Mapped buttons render only after you map the Id. Binding data alone is not enough — until the Id mapping is set, the block treats the list as empty. Map both Id and Label.

Note: The toggleButton method changes the selection silently. It updates the selection but doesn't run that button's On Click actions. After it runs, {{ id.selectedOption.label }} holds the button's id, not its label, until the user clicks a button. Read {{ id.selectedOptionId }} to get the selection.

Related Blocks