🖲 Components: interactive

Every click inside a widget is wired to a function through an action object.

🔘 Button

• label — the text.
• onClickAction — the action to run.
• variant — solid | soft | outline | ghost.
• color — primary | secondary | success | danger | warning | info.
• size — sm | md | lg.
• iconStart, iconEnd — an icon name or { name, stroke, fill, size }.
• submit — submits the surrounding Form.
• block — full width, pill — rounded, width.
• disabled, loading.

<Button
  label="Book now"
  color="primary"
  block
  iconStart="calendar-check"
  onClickAction={{ functionName: 'book_hotel', loadingBehavior: 'self' }}
/>

🎯 The action object

It has three fields:

• functionName — a function declared on the Functions tab.
• loadingBehavior — none, self (spinner on the element) or container (overlay on the widget).
• additionalInputs — values passed with this call, readable inside the function as {{name}}.

onClickAction={{
  functionName: 'track_order',
  loadingBehavior: 'self',
  additionalInputs: { orderId: "{{order.id}}" }
}}

Inside a Repeat, the action is resolved against that item's data — so {{order.id}} is the id of the row that was clicked.

🖱 Other clickable places

• ListViewItem — onClickAction: the whole row is clickable.
• Image — onClickAction.
• Form — onSubmitAction.
• Form fields — onChangeAction.

🛡 Double clicks

While a function call is in flight, another call to the same function is ignored — so a double-clicked button never sends the same request twice.