Skip to main content

Button Group

The Button Group component lets you display a set of buttons that users can select from. It supports single or multiple selection, optional icons, dynamic data mapping, and flexible layouts — making it useful for filter bars, mode switchers, and action toolbars.

Example Usage​

A logistics team builds an internal operations dashboard where dispatchers need to quickly filter shipments by status — Pending, In Transit, and Delivered. They add a Button Group with those three options. When a dispatcher clicks a status button, the selected value drives a query that filters the shipments table. With multi-selection enabled, dispatchers can compare multiple statuses at once without needing a separate dropdown or checkbox group.

Properties​

Property
Description
Expected Value
Button group labelText label shown alongside the button group.String (e.g., Status)
Mapped buttonToggle to enable dynamic button generation from a schema. When enabled, a Schema field appears.Boolean: {{true}} or {{false}}
SchemaArray of button objects used when Mapped button is on.Array (e.g., {{[{"label":"Button1","value":"1","icon":"IconBolt","iconVisibility":false,"disable":false,"default":true}]}})
Enable multiple selectionAllows more than one button to be selected at a time.Boolean: {{true}} or {{false}}
LayoutControls how buttons are arranged.row, column, or wrap

Events​

EventDescription
On clickTriggered when a button in the group is clicked.

Component Specific Actions (CSA)​

The following actions of the component can be controlled using the component-specific actions (CSA). You can trigger these using an event or through a RunJS query.

Action
Description
How To Access
Select optionSelects a button by value.components.buttongroup1.setSelected(value)
Clear selected optionsClears all current selections.components.buttongroup1.clear()
Set disableEnables or disables the component.components.buttongroup1.setDisable(true)
Set loadingShows or hides the loading state.components.buttongroup1.setLoading(true)
Set visibilityShows or hides the component.components.buttongroup1.setVisibility(true)

Exposed Variables​

VariableDescriptionHow To Access
selectedArray of values for the currently selected button(s). Default is [1].{{components.buttongroup1.selected}}
isVisibleWhether the component is visible.{{components.buttongroup1.isVisible}}
isDisabledWhether the component is disabled.{{components.buttongroup1.isDisabled}}
isLoadingWhether the component is in loading state.{{components.buttongroup1.isLoading}}

Validation​

Validation Option
Description
Expected Value
Make this field mandatoryMarks the field as required. Shows an error if no button is selected on form submission.Toggle: {{true}} or {{false}}
Custom validationCustom rule that returns an error message string when validation fails, or true when valid.Expression (e.g., {{components.buttongroup1.selected.length > 0 && 'Please select an option'}})

Additional Actions​

Action
Description
Configuration Options
Loading stateEnables a loading spinner, often used with isLoading to indicate progress.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
VisibilityControls component visibility.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
DisableEnables or disables the component.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
TooltipProvides additional information on hover.String (e.g., Select a status).

Devices​

Property
Description
Expected Value
Show on desktopMakes the component visible in desktop view.You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobileMakes the component visible in mobile view.You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles​

Label​

Property
Description
Configuration Options
ColorText color of the label.Color picker or hex value.
AlignmentPosition of the label relative to the buttons.Side (default) or Top
DirectionSide alignment direction, left or right of the buttons. Visible when alignment is set to Side.Left or Right icon toggle
WidthAuto or manual label width. Visible when alignment is Side.Checkbox — auto (default) or manual slider
Label widthManual width of the label as a percentage. Visible when Width is set to manual.Slider (0–100)
Width typeWhether the label width is measured relative to the component or the field. Visible when Width is set to manual.Of the Component (default) or Of the Field

Buttons​

Property
Description
Configuration Options
BackgroundBackground color of unselected buttons.Color picker or hex value.
Hover backgroundBackground color on hover.Auto (default) or Manual — when Manual, a color picker appears.
BorderBorder color of the buttons.Color picker or hex value.
TextText color of button labels.Color picker or hex value.
Font sizeFont size of button text in pixels.Number. Default: 14
Font weightWeight of button label text.normal (default), medium, bold, lighter, or bolder
IconColor of button icons.Color picker or hex value.
Selected backgroundBackground color of the selected button.Color picker or hex value.
Selected textText color of the selected button.Color picker or hex value.
Selected iconIcon color of the selected button.Color picker or hex value.
Error textColor of the validation error message.Color picker or hex value.
Border radiusCorner rounding of buttons in pixels.Number. Default: 6
AlignmentHorizontal alignment of buttons within the group.Left (default), center, or right
Box ShadowShadow applied to the button group container.Box shadow value.

Container​

Property
Description
Configuration Options
PaddingInner padding of the button group container.Default or None

Need Help?​