Button Group

<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>

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

<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>

<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>

<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>

<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>