Skip to main content
Version: 2.33.0

Button group

The Button group component is used to group a series of buttons together in a single line. It is used to group related buttons.

Button group

Properties

PropertiesDescriptionExpected Value
labelUsed to set the title of the button-group.Any String value: Select the options or {{queries.queryname.data.text}}
valuesIt can be used to set the values of the button group items.Array of strings and numbers: {{[1,2,3]}}
labelsIt can be used to set the labels of the button group items.Array of strings and numbers: {{['A','B','C']}}
Default selectedInitial selected values can be set using this.Array of strings and numbers: {{[1]}} will select the first button by default.
Enable multiple selectionToggle on or off to enable multiple selection.Boolean value: {{true}} or {{false}}

Events

Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the Events accordion and click on + Add handler.

EventsDescription
On clickThis event is triggered when the user clicks on the button in the button group.
info

Check Action Reference docs to get the detailed information about all the Actions.

General

Tooltip

A Tooltip is often used to display additional information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.

Button group layout

Layout

Show on desktop

Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on Fx and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to {{true}} or {{false}}.

Show on mobile

Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on Fx and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to {{true}} or {{false}}.

Styles

StyleDescriptionExpected value
Background colorSet a background color for the buttons in buttons group.Choose a color from the picker or enter the Hex color code. ex: #000000
Text colorSet a text color for the buttons in buttons group.Choose a color from the picker or enter the Hex color code. ex: #000000
VisibilityMake the component visible or hidden.{{true}} or {{false}}, By default, its value is set to {{true}}
DisableDisable the component.{{true}} or {{false}}, By default, its value is set to {{false}}
Border radiusAdd a border radius to the buttons in the component using this property.Any numerical value from 0 to 100
Selected text colorUse this property to modify the text color of selected buttonChoose a color from the picker or enter the Hex color code. ex: #000000
Selected background colorUse this property to modify the background color of selected buttonChoose a color from the picker or enter the Hex color code. ex: #000000
Box ShadowSets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040``

Exposed Variables

VariableDescription
selectedIf the enable multiple selection option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the enable multiple selection option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using {{components.buttongroup1.selected[0]}} or {{components.buttongroup1.selected}}

Component specific actions (CSA)

There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.