Interactive Components

Button

Renders a <button>. Wire it to an action with onClickAction — see Functions.

Prop	Type	Default	Description
label	string	—	Button text. Supports {variable} interpolation.
variant	"solid" | "ghost"	"solid"	ghost renders an outlined, transparent-background button.
color	"secondary"	—	When set, uses a lighter (dark gray) accent instead of the default near-black.
block	boolean	false	Stretch the button to fill its container's width.

{
  "component": "Button",
  "props": { "label": "View order", "variant": "solid" },
  "onClickAction": {
    "functionName": "openOrder"
  }
}

Define openOrder in functions, for example as an openLink function with config: { "url": "https://example.com/orders/{orderId}" }, and declare the orderId variable. Button reads props.label; text components read props.value. A text prop does not supply the button's label. String children are also rendered after the label.

Click actions are forwarded by Button, Box, Col, Row, Card, ListView, ListViewItem, Title, Text, Caption, Image, Table, TableRow, Spacer, Divider, Icon, and Badge. Checkbox forwards its action on change, after updating local state in remote-dom mode. The remaining components render their own content or update form state without forwarding onClickAction. Use a Button to trigger a function from a form.