Skip to main content

Toolbar Buttons (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 Toolbar Buttons widget shows a set of buttons as a toolbar. All buttons share one variant and color. A button can run an action, or it can open a menu of items. Use it for actions on a table, list, or record, such as Add, Edit, Copy, and Delete.

Widget type: WDS_TOOLBAR_BUTTONS_WIDGET

Toolbar Buttons widget in a Responsive app
Toolbar Buttons widget

Content properties​

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

Data​

Buttons​

Lists the buttons in the toolbar. You can add, rename, reorder, and remove buttons. You can also add separators. New widgets start with Add, Edit, Copy, a separator, and Delete.

Click a button to open its settings. The settings are listed below.

General​

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Disables every button in the toolbar. Default: off.

Animate loading boolean​

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

Style properties​

These properties appear in the Style tab of the property pane. They apply to all buttons in the toolbar.

General​

Button variant string​

Sets the look of the buttons. Options: Filled, Outlined, Subtle, Ghost (default for new widgets).

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

Button color string​

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

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

Alignment string​

Sets where the buttons sit in the widget. Options: start (default) or end.

Orientation string​

Lays the buttons out in a row or a column. Options: Horizontal (default) or Vertical. A vertical toolbar shows all buttons and does not collapse them into a menu.

Button settings​

These settings appear when you click a button in the Buttons list.

Content: Label​

Text string​

Sets the label of the button.

Content: General​

Button type string​

Sets what the button does. Options:

  • Simple (default): runs the button's onClick action.
  • Menu: opens a menu. Each menu item runs its own action.

Values for code: SIMPLE, MENU.

Visible boolean​

Shows or hides the button.

Disabled boolean​

Stops users from clicking the button.

Content: Menu items​

Lists the items in the button's menu. Shows when Button type is Menu. Each item has these settings:

  • Text string: the label of the item.
  • Visible boolean: shows or hides the item.
  • Disabled boolean: stops users from clicking the item.
  • onClick: the action that runs when users click the item.

Content: Events​

onClick​

Runs when users click the button. Shows when Button type is Simple. The button shows a loading state until the action finishes.

Style: Icon​

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 {{ToolbarButtons1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{ToolbarButtons1.isVisible}}

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:

ToolbarButtons1.setVisibility(false)

setDisabled (param: boolean): Promise​

Disables or enables every button in the toolbar.

Example:

ToolbarButtons1.setDisabled(true)

Events​

onClick (button)​

Each Simple button has its own onClick event. It runs when users click that button.

onClick (menu item)​

Each item in a Menu button has its own onClick event. It runs when users click that item.