ButtonGroup

A specialized container that holds buttons, displaying them in a horizontal group with borders adjusted to make them stick together. Appearance in the built-in themes:

Button group

//<code-header>
fiddle.title = 'Button group';
//</code-header>
const container = new Container({
    appendTo : targetElement,
    columns  : 2
});

for (const rendition of ['text', 'outlined', 'tonal', 'filled', 'elevated', 'padded', 'padded-filled']) {
    container.add([
        {
            type   : 'label',
            text   : StringHelper.capitalize(rendition),
            column : 1
        },
        {
            type        : 'buttongroup',
            toggleGroup : true,
            column      : 2,
            rendition,
            items       : [
                {
                    text    : 'Day',
                    pressed : true
                },
                { text : 'Week' },
                { text : 'Month' }
            ]
        }
    ]);
}

Trying to add other widgets than buttons will throw an exception.

new ButtonGroup({
    items : [
        { icon : 'fa-kiwi-bird' },
        { icon : 'fa-kiwi-otter' },
        { icon : 'fa-kiwi-rabbit' },
        ...
    ]
});

Configs

Common

listenersEvents

CSS

cls: String

Custom CSS class to add to element.

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

borderContainer

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiWidget

Other

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.

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.

toggleable: Number[]Also a property

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.

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.

useGap: Boolean= false

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

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

inputFieldAlignContainer

labelPositionContainer

rtlRTL

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Content

defaultsContainer

lazyItemsContainer

namedItemsContainer

textContentContainer

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

titleWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

tooltipWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Scrolling

scrollableWidget

Properties

Class hierarchy

isButtonGroup: Boolean= truereadonly

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

isButtonGroup: Boolean= truereadonlystatic

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

isContainerContainer

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isRTLRTL

isWidgetWidget

Other

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.

toggleable: Number[]Also a config

$namestaticWidget

catchEventHandlerExceptionsEvents

columnWidget

convertPinchToMousewheelstaticWidget

firstItemContainer

hasChangesContainer

inputFieldAlignContainer

isSettingValuesContainer

isValidContainer

itemsContainer

labelPositionContainer

lastItemContainer

rtlRTL

spanWidget

typestaticWidget

valuesContainer

Accessibility

focusVisibleWidget

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget

contentWidget

contentElementWidget

datasetWidget

elementWidget

focusableElementWidget

focusElementWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

overflowElementWidget

styleWidget

Float & align

anchorSizeWidget

maximizeOnMobileWidget

xWidget

yWidget

Layout

alignSelfWidget

flexWidget

heightWidget

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

scrollableWidget

widthWidget

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

cellInfoWidget

disabledWidget

localeHelperLocalizable

localeManagerLocalizable

readOnlyWidget

refWidget

tabWidget

tooltipWidget

Record

recordContainer

strictRecordMappingContainer

Visibility

hiddenWidget

isVisibleWidget

Widget hierarchy

containsFocusWidget

nextSiblingWidget

ownerWidget

parentWidget

previousSiblingWidget

visibleChildCountContainer

widgetMapContainer

Functions

setXYWidget

showByWidget

toFrontWidget

Lifecycle

constructBase

constructorBase

createstaticWidget

destroystaticBase

doDestroyBase

initClassstaticWidget

setConfigBase

Misc

animatePropertyBase

attachTooltipstaticWidget

callbackBase

downloadTestCaseBase

fromElementstaticWidget

fromSelectorstaticWidget

getByIdstaticWidget

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addContainer

addListenerEvents

announceAriaLiveWidget

composeWidget

createOnFrameDelayable

disableWidget

enableWidget

exitFullscreenWidget

focusWidget

getAtContainer

getWidgetByIdContainer

hasListenerEvents

insertContainer

LstaticLocalizable

maskWidget

onEvents

processWidgetConfigContainer

recomposeWidget

relayAllEvents

removeContainer

removeAllContainer

removeAllListenersEvents

removeListenerEvents

requestFullscreenWidget

resetValuesContainer

resumeEventsEvents

revertFocusWidget

setValuesContainer

suspendEventsEvents

triggerEvents

unEvents

unmaskWidget

Visibility

hideWidget

showWidget

Widget hierarchy

closestWidget

containsWidget

eachAncestorWidget

eachWidgetWidget

ownsWidget

queryWidget

queryAllWidget

upWidget

Events

action

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

// Adding a listener using the "on" method
buttonGroup.on('action', ({ source, event }) => {

});

Parameter	Type	Description
`source`	Button	Clicked button
`event`	Event	DOM event

click

Fires when a button in the group is clicked

// Adding a listener using the "on" method
buttonGroup.on('click', ({ source, event }) => {

});

Parameter	Type	Description
`source`	Button	Clicked button
`event`	Event	DOM event

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.

// Adding a listener using the "on" method
buttonGroup.on('toggle', ({ source, pressed, event }) => {

});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`event`	Event	DOM event

beforeDestroyEvents

beforeHideWidget

beforeSetRecordContainer

beforeShowWidget

catchAllEvents

destroyEvents

dirtyStateChangeContainer

elementCreatedWidget

focusInWidget

focusOutWidget

hideWidget

paintWidget

readOnlyWidget

recomposeWidget

resizeWidget

showWidget

Event handlers

onAction

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

new ButtonGroup({
    onAction({ source, event }) {

    }
});

Parameter	Type	Description
`source`	Button	Clicked button
`event`	Event	DOM event

onClick

Called when a button in the group is clicked

new ButtonGroup({
    onClick({ source, event }) {

    }
});

Parameter	Type	Description
`source`	Button	Clicked button
`event`	Event	DOM event

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.

new ButtonGroup({
    onToggle({ source, pressed, event }) {

    }
});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`event`	Event	DOM event

onBeforeDestroyEvents

onBeforeHideWidget

onBeforeSetRecordContainer

onBeforeShowWidget

onCatchAllEvents

onDestroyEvents

onDirtyStateChangeContainer

onElementCreatedWidget

onFocusInWidget

onFocusOutWidget

onHideWidget

onPaintWidget

onReadOnlyWidget

onRecomposeWidget

onResizeWidget

onShowWidget

Typedefs

AlignSpecWidget

BryntumListenerConfigEvents

CellWidgetContextWidget

ColorWidget

DelayableConfigDelayable

KeyMapConfigKeyMap

CSS variables

Name	Description
`--b-button-group-border-width`	ButtonGroup border width, overridden by `--b-button-outlined-border-width` 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-box-shadow`	ButtonGroup box-shadow, overridden by `--b-button-elevated-box-shadow` when using elevated rendition
`--b-button-group-border-color`	ButtonGroup border color, overridden by `--b-button-outlined-border-color` when using outlined rendition
`--b-button-group-padded-padding`	Padding when using "padded" rendition
`--b-button-group-padded-background`	Background when using "padded" rendition
`--b-button-group-padded-active-background`	Background for active (held down) button when using "padded" rendition
`--b-button-group-padded-pressed-background`	Background 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)
`--b-button-group-padded-pressed-box-shadow`	Box-shadow 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-button-opacity`	Opacity of the buttons in the group when using "padded" rendition
`--b-button-group-padded-border`	Border for the button group when using "padded" rendition
`--b-button-group-padded-filled-pressed-color`	Text color for pressed button when using "padded-filled" rendition
`--b-button-group-padded-filled-pressed-background`	Background 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)

Inherited

Container11

Widget20

ButtonGroup

Configs

Common

CSS

Other

Accessibility

Content

DOM

Float & align

Layout

misc

Misc

Record

Scrolling

Properties

Class hierarchy

Other

Accessibility

CSS

DOM

Float & align

Layout

Lifecycle

Misc

Record

Visibility

Widget hierarchy

Functions

Configuration

Events

Float & align

Lifecycle

Misc

Other

Visibility

Widget hierarchy

Events

Event handlers

Typedefs

CSS variables

Inherited