Action blocks

Things a person presses or triggers: buttons, toggles, floating buttons, toolbars, and approval and workflow controls.

This page is generated from the block registry, so it lists exactly what the Page Designer accepts. 27 blocks.

Block	What it is for
core.action-menu	Menu of actions opened from a trigger; fires selected.
core.approval-panel	A list of pending approval items with approve/reject actions.
core.approve-button	Button labelled for approving a record. Pressing it fires clicked; the action to run is bound in the page.
core.button	A clickable action trigger with a text label — the default control for submitting forms, confirming dialogs, and firing action chains from a Page/Form/Container.
core.button-group	A row of button-shaped choices where picking one fires a single "selected" event carrying that option's value — for a small set of mutually exclusive action-style choices (e.g.
core.cancel-button	Button labelled for cancelling. Pressing it fires clicked; the action to run is bound in the page.
core.command-button	Button with an icon and a keyboard shortcut; fires clicked.
core.delete-button	Button labelled for deleting a record. Pressing it fires clicked; the action to run is bound in the page.
core.dropdown-button	Button that opens a menu of options; fires selected.
core.email-composer	Composer to write and send a email message (to, subject, body) through the communications service; can draft the text with an AI prompt; fires sent.
core.export-button	Button labelled for exporting data. Pressing it fires clicked; the action to run is bound in the page.
core.fab	A single, always-visible primary action rendered as a floating circular (or extended pill) button — typically the one dominant "create new" action on a page or dashboard.
core.file-download	Button that downloads a file by URL and file name.
core.icon-button	A compact, icon-only action trigger — a core.button variant with no visible text caption, for toolbar/grid-row actions where space is tight but the action still needs an accessible name.
core.import-button	Button labelled for importing data. Pressing it fires clicked; the action to run is bound in the page.
core.link-button	Button styled as a link; fires clicked.
core.print-button	Button labelled for printing. Pressing it fires clicked; the action to run is bound in the page.
core.quick-action-card	Card that shows shortcuts the person can start from a record, with a title, selected fields and an icon; fires clicked when pressed.
core.quick-actions	A multi-action speed-dial: a single FAB-like trigger icon that, on click, reveals a stack of sub-actions — used where several related "create/import/etc." shortcuts should live behind one control instead of cluttering the page with several FABs.
core.refresh-button	Button labelled for reloading data. Pressing it fires clicked; the action to run is bound in the page.
core.reject-button	Button labelled for rejecting a record. Pressing it fires clicked; the action to run is bound in the page.
core.save-button	Button labelled for saving. Pressing it fires clicked; the action to run is bound in the page.
core.share-button	Button labelled for sharing. Pressing it fires clicked; the action to run is bound in the page.
core.sms-composer	Composer to write and send a text (SMS) message (to, subject, body) through the communications service; can draft the text with an AI prompt; fires sent.
core.split-button	Button with a main action and a menu of alternatives; fires clicked and selected.
core.submit-button	Button labelled for submitting a form or record. Pressing it fires clicked; the action to run is bound in the page.
core.whatsapp-composer	Composer to write and send a WhatsApp message (to, subject, body) through the communications service; can draft the text with an AI prompt; fires sent.

core.action-menu

Property	Type	Set from	Default
trigger	string	static	overflow
label	string	static, expression	Actions
items	json	static, expression, binding	[{"id":"edit","label":"Edit","icon":"edit"},{"i...

Events: selected

core.approval-panel

A list of pending approval items with approve/reject actions.

Property	Type	Set from	Default
items	json	static, expression, binding	[{"id":"1","title":"Expense report — July","req...

Events: approved, rejected

{ "blockType": "core.approval-panel", "instanceId": "leave-approvals", "blockVersion": "1.0.0", "contractVersion": 1,
  "properties": { "items": {"source":"binding","binding":{"scope":"page","key":"pendingApprovals"}} } }

• Wire approved/rejected to a callApi/workflow-task-completion action — never treat the widget's own optimistic UI as the real decision record.

core.approve-button

Property	Type	Set from	Default
label	string	static, expression, binding	Approve
hidden	boolean	static, expression, binding	false

Events: clicked

core.button

A clickable action trigger with a text label — the default control for submitting forms, confirming dialogs, and firing action chains from a Page/Form/Container.

Property	Type	Set from	Default
label	string	static, expression, binding
labelKey	string	static
icon	string	static
endIcon	string	static
expandable	boolean	static	false
htmlAttributes	json	static
highlighted	boolean	static, expression, binding
variant	string	static	contained
hidden	boolean	static, expression, binding	false
cartItemName	string	static, expression, binding
cartItemPrice	string	static, expression, binding
cartItemImage	string	static, expression, binding
cartItemSku	string	static, expression, binding

Events: clicked, focus, blur

{
  "instanceId": "btn-save-employee",
  "blockType": "core.button",
  "blockVersion": "1.0.0",
  "contractVersion": 1,
  "properties": {
    "label": { "source": "static", "value": "Save Employee" },
    "icon": { "source": "static", "value": "save" }
  }
}

• Use labelKey (not label) for any button text that must be translated.
• Reserve highlighted for state that genuinely reflects selection/active-ness (e.g. current nav item) — don't use it as a general color override.
• Prefer core.icon-button instead when there is no visible caption to show.

core.button-group

A row of button-shaped choices where picking one fires a single "selected" event carrying that option's value — for a small set of mutually exclusive action-style choices (e.g. a view-mode switcher) that don't need to persist a bound value the way core.toggle-button does.

Property	Type	Set from	Default
options	json	static, expression, binding	[{"value":"option-1","labelKey":"core.sampleOpt...

Events: selected

{
  "instanceId": "btn-group-employee-status-filter",
  "blockType": "core.button-group",
  "blockVersion": "1.0.0",
  "contractVersion": 1,
  "properties": {
    "options": {
      "source": "static",
      "value": [
        { "value": "active", "labelKey": "hcm.employeeStatus.active" },
        { "value": "on-leave", "labelKey": "hcm.employeeStatus.onLeave" },
        { "value": "terminated", "labelKey": "hcm.employeeStatus.terminated" }
      ]
    }
  }
}

• Use for short, action-style choice sets (typically 2-5 options); for a long list prefer core.select.
• Use core.toggle-button instead when the choice must be bound/persisted as a field value.
• Always author real labelKey entries for production use — the shared sample options are placeholders only.

core.cancel-button

Property	Type	Set from	Default
label	string	static, expression, binding	Cancel
hidden	boolean	static, expression, binding	false

Events: clicked

core.command-button

Property	Type	Set from	Default
label	string	static, expression, binding
icon	string	static
shortcut	string	static

Events: clicked

core.delete-button

Property	Type	Set from	Default
label	string	static, expression, binding	Delete
hidden	boolean	static, expression, binding	false

Events: clicked

core.dropdown-button

Property	Type	Set from	Default
label	string	static, expression, binding
icon	string	static
options	json	static, expression, binding	[{"value":"option-1","label":"Choice 1"},{"valu...

Events: selected

core.email-composer

Property	Type	Set from	Default
channel	string	static	EMAIL_SMTP
to	string	static, expression, binding	someone@example.com
subject	string	static, expression, binding	Quick update
body	string	static, expression, binding	Hi,
sendLabel	string	static	Send
aiDraftPromptCode	string	static
aiDraftResult	json	static, expression, binding
aiDraftLoading	boolean	static, expression, binding	false

Events: sent, aiDraftRequested

core.export-button

Property	Type	Set from	Default
label	string	static, expression, binding	Export
hidden	boolean	static, expression, binding	false

Events: clicked

core.fab

A single, always-visible primary action rendered as a floating circular (or extended pill) button — typically the one dominant "create new" action on a page or dashboard.

Property	Type	Set from	Default
icon	string	static
label	string	static, expression
extended	boolean	static	false

Events: clicked

{
  "instanceId": "fab-new-employee",
  "blockType": "core.fab",
  "blockVersion": "1.0.0",
  "contractVersion": 1,
  "properties": {
    "icon": { "source": "static", "value": "add" },
    "label": { "source": "static", "value": "New Employee" }
  }
}

• Use at most one FAB per page/dashboard for the single dominant action — for multiple related actions use core.quick-actions instead.
• Set extended: true only when there is enough horizontal room and the extra clarity is worth the space.
• It is valid on dashboard targets as well as page/form/container.

core.file-download

Property	Type	Set from	Default
label	string	static, expression, binding	Download
fileUrl	string	static, expression, binding
fileName	string	static, expression, binding

Events: clicked

core.icon-button

A compact, icon-only action trigger — a core.button variant with no visible text caption, for toolbar/grid-row actions where space is tight but the action still needs an accessible name.

Property	Type	Set from	Default
icon	string	static
label	string	static, expression

Events: clicked

{
  "instanceId": "icon-btn-delete-row",
  "blockType": "core.icon-button",
  "blockVersion": "1.0.0",
  "contractVersion": 1,
  "properties": {
    "icon": { "source": "static", "value": "delete" },
    "label": { "source": "static", "value": "Delete employee record" }
  }
}

• Always author a real, descriptive label — it is the button's only accessible name, not a decorative fallback.
• Use for dense toolbars/grid-row actions where a full core.button label would not fit.
• Pick an icon name that is unambiguous without accompanying text (e.g. a trash can for delete, not a generic dot).

core.import-button

Property	Type	Set from	Default
label	string	static, expression, binding	Import
hidden	boolean	static, expression, binding	false

Events: clicked

core.link-button

Property	Type	Set from	Default
label	string	static, expression, binding	Learn more
hidden	boolean	static, expression, binding	false

Events: clicked

core.print-button

Property	Type	Set from	Default
label	string	static, expression, binding	Print
hidden	boolean	static, expression, binding	false

Events: clicked

core.quick-action-card

Property	Type	Set from	Default
record	json	static, binding
titlePath	string	static	title
fields	json	static	[]
items	json	static, expression, binding	[{"primary":"New record","icon":"add"},{"primar...
icon	string	static, expression, binding	bolt

Events: itemClicked

core.quick-actions

A multi-action speed-dial: a single FAB-like trigger icon that, on click, reveals a stack of sub-actions — used where several related "create/import/etc." shortcuts should live behind one control instead of cluttering the page with several FABs.

Property	Type	Set from	Default
icon	string	static	add
actions	json	static, expression, binding	[{"id":"new-record","icon":"add","label":"New r...

Events: selected

{
  "instanceId": "quick-actions-hr-dashboard",
  "blockType": "core.quick-actions",
  "blockVersion": "1.0.0",
  "contractVersion": 1,
  "properties": {
    "icon": { "source": "static", "value": "add" },
    "actions": {
      "source": "static",
      "value": [
        { "id": "new-employee", "icon": "person_add", "label": "New Employee" },
        { "id": "new-leave-request", "icon": "event_available", "label": "New Leave Request" },
        { "id": "bulk-import", "icon": "upload", "label": "Bulk Import", "roles": ["hr-admin"] }
      ]
    }
  }
}

• Use when a page needs 2+ related shortcut actions that would otherwise require several separate FABs.
• Keep roles filtering as a UX convenience only — always enforce the real authorization check server-side/via the actual permission model, never rely on this list alone.
• Give every action a distinct, recognizable icon since the sub-actions expand in a compact stack.

core.refresh-button

Property	Type	Set from	Default
label	string	static, expression, binding	Refresh
hidden	boolean	static, expression, binding	false

Events: clicked

core.reject-button

Property	Type	Set from	Default
label	string	static, expression, binding	Reject
hidden	boolean	static, expression, binding	false

Events: clicked

core.save-button

Property	Type	Set from	Default
label	string	static, expression, binding	Save
hidden	boolean	static, expression, binding	false

Events: clicked

core.share-button

Property	Type	Set from	Default
label	string	static, expression, binding	Share
hidden	boolean	static, expression, binding	false

Events: clicked

core.sms-composer

Property	Type	Set from	Default
channel	string	static	SMS_GENERIC
to	string	static, expression, binding	+15551234567
subject	string	static, expression, binding
body	string	static, expression, binding	On my way, be there in 10 minutes.
sendLabel	string	static	Send
aiDraftPromptCode	string	static
aiDraftResult	json	static, expression, binding
aiDraftLoading	boolean	static, expression, binding	false

Events: sent, aiDraftRequested

core.split-button

Property	Type	Set from	Default
label	string	static, expression, binding
options	json	static, expression, binding	[{"value":"option-1","label":"Secondary action ...

Events: clicked, selected

core.submit-button

Property	Type	Set from	Default
label	string	static, expression, binding	Submit
hidden	boolean	static, expression, binding	false

Events: clicked

core.whatsapp-composer

Property	Type	Set from	Default
channel	string	static	WHATSAPP_CLOUD_API
to	string	static, expression, binding	+15551234567
subject	string	static, expression, binding
body	string	static, expression, binding	Hi! Following up on our order.
sendLabel	string	static	Send
aiDraftPromptCode	string	static
aiDraftResult	json	static, expression, binding
aiDraftLoading	boolean	static, expression, binding	false

Events: sent, aiDraftRequested