Skip to main content

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.

How to use Button Group Widget

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.

PropertyDescription
OrientationSets whether the group buttons are listed Horizontally or Vertically.
VisibleControls 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.
DisabledDisables input to the widget. The widget will be visible to the user but a user input will not be allowed.
Animate LoadingWhen 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.

PropertyDescription
labelSets the text shown within a button.
Button typeControl whether this is a simple button, or a menu button with dropdown items.
Button colorSets the background color of the button.
DisabledMakes the button un-clickable or unusable. The button will remain visible to the user but user interaction will not be allowed.
VisibleControls 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.
IconGives a list of icons you can add to your buttons.
Icon AlignmentSets the alignment of the selected icon.
Menu itemsArray of menu items for a Menu-type button. This lets you add/remove/edit a menu item and customize the its settings.
EventDescription
onClickSets 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.

PropertyDescription
LabelSets the text shown within the menu item.
Background ColorSets the background color of a menu item.
Text ColorSets the text color of a menu item.
VisibleControls 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.
DisabledMakes the menu item un-clickable or unusable. The menu item will remain visible to the user but user interaction will not be allowed.
IconChoose from a list of icons you can add to your menu item.
Icon colorSets the icon color of the selected icon.
Icon AlignmentSets the alignment of the selected icon.

Events

You can define functions that will be called when these events are triggered in the widget.

EventDescription
onClickSets 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 PropertyDescription
Button VariantSets 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 RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowCasts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.
info

We currently use the icons from Blueprint library. You can see the list of icons here.