Button Group

Last updated on August 02, 2024.

Element: <ins-button-group>

Defines a group of inline buttons.

Disabled State

Code Snippet

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

Complete Example

Code Snippet

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

Colours - Default

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>

Colours - 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('insClick', 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)	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

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.