Component library

Buttons component

Last updated 2 November 2026

Defines a clickable button.

Live demo

<ins-button></ins-button>

Attributes

Button options

The ins-button options attribute expects a comma-separated string of option labels (e.g., options="Option 1, Option 2").

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
color	string	blue	blue / green / positive / warning	Defines color of button
label	string	BUTTON	any	Defines label of button
icon	string	""	Insites Font Icons	Defines icon of button
icon-right	string	""	Insites Font Icons	Defines icon of button after the label
size	string	normal	normal, small, large	Defines size of button
data	string	""	any	Defines data of button
type	string	""	any	Defines type of button
options	string	""	any value separated by comma	Defines dropdown options of button
options-only	boolean	false	true, false	Will only display the `icon` attribute of the button. Attributes `icon` and `options` are required to enable this mode.
dropdown	boolean	false	true, false	Makes the whole button show options on click
solid	boolean	false	true, false	Enables button to have solid display color
disabled	boolean	false	true, false	Disables button
cursor	string	""	text, default	Defines appearance of cursor
text-transform	string	""	uppercase, lowercase, none	Defines appearance of label
loading	boolean	false	true, false	Enables loading state of button

Events

EVENT	OBJECT	DESCRIPTION
insClick	label, data	Execute a script when button is clicked
insClickOption	label	Execute a script when button option is clicked

Methods / API

Examples

Complete Example

<ins-button 
  label="NORMAL" 
  icon="icon-email-1" 
  icon-right="icon-heart"
  solid 
  color="blue" 
  size="normal"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-button>

Default State

<ins-button></ins-button>

Default State

<ins-button></ins-button>

Direct Data Set

<ins-button 
  id="dsv">
</ins-button>

<script>
  var dsv = document.getElementById('dsv')
  dsv.addEventListener('didLoad', function(e){
    dsv.label = 'Direct Set Data';
    dsv.solid = true;
  });
</script>

Static Data Source

<ins-button 
  label="Open" 
  solid 
  color="positive" 
  size="normal">
</ins-button>

Disabled State

<ins-button 
  disabled 
  solid 
  color="negative" 
  label="Delete">
</ins-button>

Label Attribute

<ins-button 
  label="Label Change">
</ins-button>

Color Attribute

<ins-button 
  color="positive">
</ins-button>

Size Attribute

<ins-button 
  size="large">
</ins-button>

Types - Default

<ins-button 
  label="TEXT" 
  color="blue" 
  size="normal">
</ins-button>

Types - Normal

<ins-button 
  label="NORMAL" 
  solid 
  color="blue" 
  size="normal">
</ins-button>

Types - Outlined

<ins-button 
  label="OUTLINED" 
  color="blue" 
  outlined 
  size="normal">
</ins-button>

Types - Default with Icon

<ins-button 
  label="TEXT" 
  icon="icon-email-1" 
  color="blue" 
  size="normal">
</ins-button>

Types - Normal with Icon

<ins-button 
  label="NORMAL" 
  icon="icon-email-1" 
  solid 
  color="blue" 
  size="normal">
</ins-button>

Types - Outlined with Icon

<ins-button 
  label="OUTLINED" 
  icon="icon-email-1" 
  color="blue" 
  outlined 
  size="normal">
</ins-button>

Types - Action Button

<ins-button 
  icon="icon-delete" 
  color="grey" 
  size="normal" 
  label="">
</ins-button>

Types - Options Button

<ins-button 
  label="NORMAL" 
  icon="icon-email-1" 
  solid 
  color="blue" 
  size="normal" 
  options="Option 2, Option 3">
</ins-button>

Options-Dropdown Button

<ins-button 
  label="NORMAL" 
  icon="icon-email-1" 
  solid 
  color="blue" 
  size="normal" 
  options="Option 2, Option 3" dropdown>
</ins-button>

Sizes - Small

<ins-button 
  label="SMALL" 
  solid 
  color="blue" 
  size="small">
</ins-button>

Sizes - Large

<ins-button 
  label="LARGE" 
  solid 
  color="blue" 
  size="large">
</ins-button>

Colours - Primary

<ins-button label="TEXT" color="primary" size="normal"></ins-button>
<ins-button label="NORMAL" solid color="primary" size="normal"></ins-button>
<ins-button label="OUTLINED" color="primary" outlined size="normal"></ins-button>

Colours - Positive

<ins-button 
  label="TEXT" 
  color="positive" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="positive" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="positive" 
  outlined 
  size="normal"></ins-button>

Colours - Secondary

<ins-button 
  label="TEXT" 
  color="secondary" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="secondary" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="secondary" 
  outlined 
  size="normal">
</ins-button>

Colours - Negative

<ins-button 
  label="TEXT" 
  color="negative" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="negative" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="negative" 
  outlined 
  size="normal">
</ins-button>

Colours - Warning

<ins-button 
  label="TEXT" 
  color="warning" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="warning" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="warning" 
  outlined 
  size="normal">
</ins-button>

Colours - Information 1

<ins-button label="TEXT" color="information-1" size="normal"></ins-button>
<ins-button label="NORMAL" solid color="information-1" size="normal"></ins-button>
<ins-button label="OUTLINED" color="information-1" outlined size="normal"></ins-button>

Colours - Information 2

<ins-button 
  label="TEXT" 
  color="information-2" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="information-2" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="information-2" 
  outlined 
  size="normal">
</ins-button>

Loading State - Default

<ins-button 
  label="OUTLINED" 
  color="blue" 
  solid 
  size="normal" 
  loading>
</ins-button>

Loading State - Small

<ins-button 
  label="OUTLINED" 
  color="blue" 
  solid 
  size="small" 
  loading>
</ins-button>

Loading State - Large

<ins-button 
  label="OUTLINED" 
  color="blue" 
  solid 
  size="large" 
  loading>
</ins-button>

Loading State - Button with Loading State

<ins-button 
  id="submitButton" 
  label="Loading button" 
  color="blue" solid>
</ins-button>

<script>
  var submitButtonEl = document.getElementById('submitButton');
  submitButtonEl.addEventListener('insClick', function(e){
    submitButtonEl.loading = true;
    setTimeout(() => {
      submitButtonEl.loading = false;
    }, 2000);
  });
</script>

insClick

<ins-button 
  id="onClickInsButton" 
  data="demo-data">
</ins-button>

<script>
  const onClickInsButton = document.getElementById('onClickInsButton')
  onClickInsButton.addEventListener('insClick', event => {
    console.log(event.detail.label);
    console.log(event.detail.data);
    alert('Hello! I am an alert box!!');
  });
</script>

insClickOption

<ins-button 
  id="onClickInsButtonOption" 
  label="NORMAL" 
  solid 
  options="Option 2,Option 3">    
</ins-button>

<script>
  var button = document.getElementById('onClickInsButtonOption');
  // Event handler to check button 'options' click
      button.addEventListener('insClickOption', function(event) {
        console.log(event.detail.label);
        alert(event.detail.option);
      });
  // Event handler for 'main button' click
    button.addEventListener('insClick', function(event) {
      console.log(event.detail.label);
      alert('Main Button Label ' + event.detail.label);
    });
</script>

Options Only Attribute

<ins-button
  icon="icon-more-vertical"
  options="Add,Edit,Delete,Archive,Restore"
  options-only
  outlined>
</ins-button>