HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Button Group
A method of selecting a value from a range of values using grouped buttons
Examples

HTML

<div id="buttonGroup1"></div>
<br>
<div id="buttonGroup2"></div>

JavaScript

buttonGroup = new hx.ButtonGroup('#buttonGroup1')
buttonGroup.items(['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Other']);

// Full width example with individual active classes per-button
buttonGroup = new hx.ButtonGroup('#buttonGroup2', {fullWidth: true})
buttonGroup.items([
  {
    value: 'Positive',
    activeClass: 'hx-positive'
  }, {
    value: 'Warning',
    activeClass: 'hx-warning'
  }, {
    value: 'Negative',
    activeClass: 'hx-negative'
  }, {
    value: 'Info',
    activeClass: 'hx-info'
  },
  'Other'
]);
buttonGroup.value('Positive');
Api
Prototypes
hx.ButtonGroupextendsEventEmitter
Constructors
hx.ButtonGroupselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
A css selector or element to use when constructing the ButtonGroup
options
The options to use when creating the button group.
Properties
activeClassString
The button class to use for the active button.
Default: 'hx-contrast'
buttonClassString
The button class to use for inactive buttons.
Default: 'hx-complement'
disabledBoolean
Whether the button group should be disabled
Default: false
fullWidthBoolean
Whether the group should span the full width of its container.
Default: false
itemsArray[Any]
The list of items that can be selected. This can either be an array of string, or an array of objects with value properties (and other information for displaying the items).
In addition to the value property, an activeClass property can also be provided that will be applied when a button is clicked instead of the activeClass provided in the constructor. 
[
  'Button Text', // Strings and objects can be mixed if required
  {
    value: 'Button Text' // If objects are used, the value property is required
  },
  {
    value: 'Button Text',
    activeClass: 'hx-positive' // The activeClass property is optional.
  }
]
A custom renderer may be set if alternative object structures are required.
renderernodeHTMLElementdataString / ObjectcurrentBoolean
The render function to call when rendering the buttons
The default render function is as follows: 
function(node, data, current) {
  hx.select(node).text(data.value != null ? data.value : data);
};
Setting a custom renderer will not change the 'click' method for setting the data or how the classes are added to the buttons.
Arguments
nodeHTMLElement
The button node.
dataString / Object
The data for the item, as passed into the 'items' method
currentBoolean
Whether the element is the currently selected element.
Events
change
The event called when the selected item is changed.
Properties
causeString
Can be 'user' or 'api', depending on what caused the change. 'api' means an call to the javascript api caused the change, 'user' means that the change was caused by inputting
valueAny
The item that was selected.
Methods
disabledvalueBooleanButtonGroup
Sets the disabled state of a button group
Arguments
valueBoolean
Whether the button group should be disabled
Returns
ButtonGroup
This ButtonGroup for chaining
disabledBoolean
Gets the disabled state of a button group
Returns
Boolean
Whether the button group is disabled
itemsitemsArray[Any]ButtonGroup
Sets the list of items that will be shown in the button group
Arguments
itemsArray[Any]
The list of items that can be selected. This can either be an array of string, or an array of objects with value properties (and other information for displaying the items).
In addition to the value property, an activeClass property can also be provided that will be applied when a button is clicked instead of the activeClass provided in the constructor. 
[
  'Button Text', // Strings and objects can be mixed if required
  {
    value: 'Button Text' // If objects are used, the value property is required
  },
  {
    value: 'Button Text',
    activeClass: 'hx-positive' // The activeClass property is optional.
  }
]
A custom renderer may be set if alternative object structures are required.
Returns
ButtonGroup
This ButtonGroup for chaining
itemsArray[Any]
Gets the list of items that are currently shown in the button group
Returns
Array[Any]
The currently set items if no arguments are provided.
rendererrenderFunctionButtonGroup
A method for overriding the default button renderer.
Arguments
rendernodeHTMLElementdataString / ObjectcurrentBoolean
The render function to call when rendering the buttons
The default render function is as follows: 
function(node, data, current) {
  hx.select(node).text(data.value != null ? data.value : data);
};
Setting a custom renderer will not change the 'click' method for setting the data or how the classes are added to the buttons.
Arguments
nodeHTMLElement
The button node.
dataString / Object
The data for the item, as passed into the 'items' method
currentBoolean
Whether the element is the currently selected element.
Returns
ButtonGroup
This ButtonGroup for chaining
rendererFunction
Gets the button renderer.
Returns
function
The currently set renderer function.
valuevalueAnyButtonGroup
Sets the currently selected item.
Arguments
valueAny
The value of the item to select. For objects items, this should be the value of the 'value' property.
Returns
ButtonGroup
This ButtonGroup for chaining
valueAny
Gets the currently selected item. If objects were set for the items, this will return the entire object for the selected button (not just the value string).
Returns
Any
The currently selected item.
Functions
hx.buttonGroupoptionsObjectSelection
Creates a new ButtonGroup set up on a detached element, wrapped in a selection
Arguments
options
The options to use when creating the button group.
Properties
activeClassString
The button class to use for the active button.
Default: 'hx-contrast'
buttonClassString
The button class to use for inactive buttons.
Default: 'hx-complement'
disabledBoolean
Whether the button group should be disabled
Default: false
fullWidthBoolean
Whether the group should span the full width of its container.
Default: false
itemsArray[Any]
The list of items that can be selected. This can either be an array of string, or an array of objects with value properties (and other information for displaying the items).
In addition to the value property, an activeClass property can also be provided that will be applied when a button is clicked instead of the activeClass provided in the constructor. 
[
  'Button Text', // Strings and objects can be mixed if required
  {
    value: 'Button Text' // If objects are used, the value property is required
  },
  {
    value: 'Button Text',
    activeClass: 'hx-positive' // The activeClass property is optional.
  }
]
A custom renderer may be set if alternative object structures are required.
renderernodeHTMLElementdataString / ObjectcurrentBoolean
The render function to call when rendering the buttons
The default render function is as follows: 
function(node, data, current) {
  hx.select(node).text(data.value != null ? data.value : data);
};
Setting a custom renderer will not change the 'click' method for setting the data or how the classes are added to the buttons.
Arguments
nodeHTMLElement
The button node.
dataString / Object
The data for the item, as passed into the 'items' method
currentBoolean
Whether the element is the currently selected element.
Returns
Selection
A selection containing an element with an ButtonGroup initialised on it