Button Group
The Button group widget represents a set of buttons in a group. Group can have simple buttons or menu buttons with drop-down items.

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the Button Group widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.
Property
Description
Orientation
Sets whether the group buttons are listed Horizontally or Vertically.
Visible
Controls widget's visibility on the page. When turned off: The widget will not be visible when the app is published. It appears translucent when in Edit mode.
Disabled
Disables input to the widget. The widget will be visible to the user but a user input will not be allowed.
Animate Loading
When turned off, the widget will load without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it.

Group buttons settings

You can customize each group button through a set of properties by clicking on the gear icon.
Property
Description
label
Sets the text shown within a button.
Button type
Control whether this is a simple button, or a menu button with dropdown items.
Button color
Sets the background color of the button.
Disabled
Makes the button un-clickable or unusable. The button will remain visible to the user but user interaction will not be allowed.
Visible
Controls button's visibility on the page. When turned off: The button will not be visible when the app is published. It appears translucent when in Edit mode.
Icon
Gives a list of icons you can add to your buttons.
Icon Alignment
Sets the alignment of the selected icon.
Menu items
Array of menu items for a Menu-type button. This lets you add/remove/edit a menu item and customize the its settings.
Event
Description
onClick
Sets an an action to take place when the user clicks on this widget, or you can define a custom JavaScript function to call instead.
For the button of type "Menu," you can add several options to be shown in a dropdown menu. Each menu item can now be customized through a set of properties by clicking on the gear icon.
Property
Description
Label
Sets the text shown within the menu item.
Background Color
Sets the background color of a menu item.
Text Color
Sets the text color of a menu item.
Visible
Controls menu item's visibility on the page. When turned off: The menu item will not be visible when the app is published. It appears translucent when in Edit mode.
Disabled
Makes the menu item un-clickable or unusable. The menu item will remain visible to the user but user interaction will not be allowed.
Icon
Choose from a list of icons you can add to your menu item.
Icon color
Sets the icon color of the selected icon.
Icon Alignment
Sets the alignment of the selected icon.

Events

You can define functions that will be called when these events are triggered in the widget.
Event
Description
onClick
Sets an an action to take place when the user clicks on this widget. Can be set from the GUI list of common actions (See a list of supported actions.), or you can define a custom JavaScript function to call instead.

Styles

Style properties allow you to change the look and feel of the widget.
Style Property
Description
Button Variant
Sets the the button style type to represent its significance - Primary, Secondary, or Tertiary. You can use JavaScript to set this field by writing code that evaluates to the string "PRIMARY", "SECONDARY", or "TERTIARY".
Border Radius
Rounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box Shadow
Casts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.
We currently use the icons from Blueprint library. You can see the list of icons here.
Last modified 1mo ago
Copy link
Edit on GitHub
On this page
Properties
Widget Properties
Events
Styles