The Button group widget represents a set of buttons in a group. Group can have simple buttons or menu buttons with drop-down items.
{% embed url="https://youtu.be/oWGK1s5nGns" %}
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
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. |
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. |
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. |
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. |
{% hint style="info" %} We currently use the icons from Blueprint library. You can see the list of icons here. {% endhint %}