Insites Docs Web Components V1GeneralButton Group

Button Group

Last updated on August 02, 2024.

Defines a group of inline button

Complete Example

Code Snippet

<ins-button-group options="Label 1, Label 2, Label 3" color="blue" small active-option="Label 1"></ins-button-group>
State - Disabled

Code Snippet

<ins-button-group options="Label 1, Label 2, Label 3" color="blue" disabled></ins-button-group>
Colour & Size - Default Blue

Code Snippet

<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>
Colour & Size - Gray

Code Snippet

<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

Code Snippet

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

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

Code Snippet

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

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
options string "" any (comma separated) Define 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
onButtonAction 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
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.