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.
VisibleControl widget's visibility on the page. When turned off: The widget isn't visible when the app is published. It appears translucent when in Edit mode.
DisabledDisables input to the widget. The widget is visible to the user, but a user input is not allowed.
Animate LoadingWhen turned off, the widget loads 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 inactive or unusable. The button remains visible to the user but user interaction is not allowed.
VisibleControls button's visibility on the page. When turned off: The button isn't 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 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.
VisibleControl menu item's visibility on the page. When turned off: The menu item isn't visible when the app is published. It appears translucent when in Edit mode.
DisabledMakes the menu item inactive or unusable. The menu item remains visible to the user but user interaction is not 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 are called when these events are triggered in the widget.

EventDescription
onClickSets 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 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

Currently Appsmith uses the icons from Blueprint library. You can see the list of icons here.