Skip to content

Component library

Button Group

Last updated 2 November 2026

Defines a group of inline buttons.

Live demo

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue" 
  small 
  active-option="Label 1"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-button-group>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
options string "" any (comma separated) Defines labels for each button
active-option string "" any Defines which button is active by the value matching the label.
active-index int 0 any Defines which button is active by index
color string blue blue, grey Defines CSS class used for the button color
size string normal normal, small Defines button size
disabled boolen false true, false Disable the buttons

Events

EVENT OBJECT DESCRIPTION
insClick action, label, index Emit button details when button is clicked

Methods

FUNCTION PARAMETERS RETURN DESCRIPTION
getActiveOption n/a index, label Return active button details
setActiveOption string n/a Set button matching label to active

Examples

Disabled State

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue" 
  disabled>
</ins-button-group>

Colours - Default

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue">
</ins-button-group>

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue" 
  size="small">
</ins-button-group>

Colours - Gray

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue">
</ins-button-group>

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="grey" 
  size="small">
</ins-button-group>

Event

<ins-button-group 
  options="Label 1, Label 2, Label 3" 
  color="blue" 
  id="methodEl">
</ins-button-group>

<script>
  document.getElementById('methodEl').addEventListener('insClick', function(event) {
    alert("Button group clicked, see console log for data.")
    console.log('Event', event.detail);
  });
</script>

Method

<ins-button-group 
  options="Label 1, Label 2" 
  color="blue" id="directValueEl">
</ins-button-group>

<br>

<ins-select 
  id="triggerMethodEl" 
  label="Change Active Button" 
  value="Label 1">
 
  <ins-select-option 
    label="Label 1" 
    value="Label 1">
  </ins-select-option>

  <ins-select-option 
    label="Label 2" 
    value="Label 2">
  </ins-select-option>

</ins-select>

<script>
  document.getElementById('triggerMethodEl').addEventListener('valueChange', function(event) {
    // set button group 'active' button
    document.getElementById('directValueEl').setActiveOption(event.detail);
    // console log the 'active' button details
    console.log("Changed active button", document.getElementById('methodEl').getActiveOption());
  });
</script>