Skip to main content




Applies only to Traditional Web Apps




Represent a choice of available options that are displayed.

Use the ButtonGroup to display all available choices to the user simultaneously. It is ideal when you have between two to four options. To show a larger number of options, consider using a Dropdown.

How to use

Add ButtonGroup items to the content placeholder.

  1. Drag the ButtonGroup pattern into the preview.

  2. By default, the pattern comes with three ButtonGroupItems.

  3. Drag as many ButtonGroupItems as you need.

  4. Set a Variable and a Value.

  5. Change the text in the label of the ButtonGroupItems.

Input Parameters

Input Name Description Type Mandatory Default Value
IsJustified The Items are evenly distributed in the space available. Boolean False False

Layout and Classes

Advanced Use Case

Use ButtonGroup with ListRecords

  1. Drag the ButtonGroup Pattern into the preview.

  2. In the Content placeholder, drag a ListRecords widget.

  3. In the ListRecords widget, drag a ButtonGroupItem.

  4. In the ButtonGroupItem, use expressions with the class btn to display the content.

  5. In the ListRecords Widget, set the Line Separator to None in order to avoid additional margin between elements.

  6. Publish and test.

  • Was this article helpful?