ButtonGroup
Widget

A specialized container that holds buttons, displaying them in a tightly joined horizontal group with shared borders. Only Button widgets are allowed as children — adding other widget types will throw an exception. Use toggleGroup or toggleable to turn the group into a toggle bar where one or more buttons can be pressed at a time. The visual style of all buttons can be set uniformly with the rendition config.

new ButtonGroup({
    toggleGroup : true,
    items       : [
        { icon : 'fa fa-align-left',    pressed : true },
        { icon : 'fa fa-align-center' },
        { icon : 'fa fa-align-right' }
    ]
});

Useful configs, properties, and events

Config / Event	Description
items	Array of button configs or Button instances
color	Default color applied to all contained buttons
toggleGroup	Enable toggle-group behavior for all buttons
toggleable	Min/max range of simultaneously pressed buttons
rendition	Visual style: `'filled'`, `'outlined'`, `'tonal'`, `'text'`, etc.
click	Fired when a button in the group is clicked
toggle	Fired when a button's pressed state changes

Configs

Configs are options you supply in a configuration object when creating an instance of this class

color : String

Default color to apply to all contained buttons, see Button#color. Individual buttons can override the default.
items : ButtonConfig/Button[]

An array of Buttons or typed Button config objects.
rendition : 'elevated'/'filled'/'tonal'/'outlined'/'text'+ 3 more
Predefined style to use for the buttons. Possible values are:
- 'elevated' - Raised buttons with box-shadow
- 'filled' - Filled with the primary color
- 'tonal' - Filled with a faded shade of the primary color
- 'outlined' - Outlined with borders and pale or transparent fill
- 'text' - Transparent text-only button
- 'padded' - Adds a background to the ButtonGroup and padding around the buttons + neutral background for toggled buttons
- 'padded-filled' - Same as 'padded', but uses a primary color shade for the background of toggled buttons
The supplied value will be part of the button group's and each button's class list, as b-button-{rendition}.

If not value is supplied, it will search upwards for one, falling back to using the first button's rendition.

Has a corresponding runtime rendition property.
toggleGroup : Boolean

Set to true to turn the ButtonGroup into a toggle group, assigning a generated value to each contained buttons toggleGroup config. Individual buttons can override the default.
toggleable : Boolean/Number

A two-element array containing the minimum and maximum number of toggleable buttons. If a single number is specified, it is converted to an array using that given value as the maximum and 1 is used as the minimum. If true is specified, it is equivalent to [0, Infinity], allowing any buttons to be toggled independently or all buttons to be untoggled.

A value of null (the default) is similar to toggleable : 1 unless toggleGroup is set, or individual buttons are configured with their own toggleable or toggleGroup values. If this config is used, toggleable and toggleGroup should not be assigned to individual buttons.

Has a corresponding runtime toggleable property.
useGap : Booleanfalse

If you use gaps between your buttons, set this to true (controls whether to use border-radius for the button elements)

cls : String

Custom CSS class to add to element.

new ButtonGroup({
  cls : 'custom-css-class,
  items : [
      { icon : 'fa fa-unicorn', cls : 'button-cls-class' },
      ...
  ]
});

Properties

Properties are getters/setters or publicly accessible variables on this class

isButtonGroup : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ButtonGroup class, or subclass thereof.

rendition : 'elevated'/'filled'/'tonal'/'outlined'/'text'+ 3 more
Predefined style to use for the buttons. Possible values are:
- 'elevated' - Raised buttons with box-shadow
- 'filled' - Filled with the primary color
- 'tonal' - Filled with a faded shade of the primary color
- 'outlined' - Outlined with borders and pale or transparent fill
- 'text' - Transparent text-only button
- 'padded' - Adds a background to the ButtonGroup and padding around the buttons + neutral background for toggled buttons
- 'padded-filled' - Same as 'padded', but uses a primary color shade for the background of toggled buttons
The supplied value will be part of the button group's and each button's class list, as b-button-{rendition}.

If not value is supplied, it will search upwards for one, falling back to using the first button's rendition.

Has a corresponding rendition config.
toggleable : Boolean/Number

A two-element array containing the minimum and maximum number of toggleable buttons. If a single number is specified, it is converted to an array using that given value as the maximum and 1 is used as the minimum. If true is specified, it is equivalent to [0, Infinity], allowing any buttons to be toggled independently or all buttons to be untoggled.

A value of null (the default) is similar to toggleable : 1 unless toggleGroup is set, or individual buttons are configured with their own toggleable or toggleGroup values. If this config is used, toggleable and toggleGroup should not be assigned to individual buttons.

Has a corresponding toggleable config.
isButtonGroup : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ButtonGroup class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

action

Fires when the default action is performed on a button in the group (the button is clicked)
click

Fires when a button in the group is clicked
toggle

Fires when a button in the group is toggled (the pressed state is changed). If you need to process the pressed button only, consider using click event or action event.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onAction

Called when the default action is performed on a button in the group (the button is clicked)
onClick

Called when a button in the group is clicked
onToggle

Called when a button in the group is toggled (the pressed state is changed). If you need to process the pressed button only, consider using click event or action event.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-button-group-border-color	ButtonGroup border color, overridden by `--b-button-outlined-border-color` when using outlined rendition
--b-button-group-border-radius	ButtonGroup border-radius, should normally match Button border-radius (cannot hide overflow, since badges need to stay visible)
--b-button-group-border-width	ButtonGroup border width, overridden by `--b-button-outlined-border-width` when using outlined rendition
--b-button-group-box-shadow	ButtonGroup box-shadow, overridden by `--b-button-elevated-box-shadow` when using elevated rendition
--b-button-group-padded-active-background	Background for active (held down) button when using "padded" rendition
--b-button-group-padded-background	Background when using "padded" rendition
--b-button-group-padded-border	Border for the button group when using "padded" rendition
--b-button-group-padded-button-opacity	Opacity of the buttons in the group when using "padded" rendition
--b-button-group-padded-filled-pressed-background	Background for pressed button when using "padded-filled" rendition
--b-button-group-padded-filled-pressed-color	Text color for pressed button when using "padded-filled" rendition
--b-button-group-padded-filled-pressed-hover-background	Background for hovered pressed button when using "padded-filled" rendition (when not in a toggle group)
--b-button-group-padded-padding	Padding when using "padded" rendition
--b-button-group-padded-pressed-background	Background for pressed button when using "padded" rendition
--b-button-group-padded-pressed-border	Border for pressed button when using "padded" rendition
--b-button-group-padded-pressed-box-shadow	Box-shadow for pressed button when using "padded" rendition
--b-button-group-padded-pressed-hover-background	Background for hovered pressed button when using "padded" rendition (when not in a toggle group)

ButtonGroup
Widget

Useful configs, properties, and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree4

Mixins5

Contents

ButtonGroup Widget

Useful configs, properties, and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree4

Mixins5

Contents

ButtonGroup
Widget