Insites Docs Web Components V2GeneralButtons

Buttons

Published on January 29, 2021, updated on June 01, 2021

Element: <ins-button>

Defines a clickable button.

Default State

Code Snippet

<ins-button></ins-button>
Complete Example

Code Snippet

<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

Code Snippet

<ins-button></ins-button>
Direct Data Set

Code Snippet

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

Code Snippet

<ins-button></ins-button>
Static Data Source

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<ins-button 
  label="OUTLINED" 
  color="blue" 
  outlined 
  size="normal">
</ins-button>
Types - Default with Icon

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

<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

Code Snippet

<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

Code Snippet

<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

Code Snippet

<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

Code Snippet

<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

Code Snippet

<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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

<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

Code Snippet

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

 

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

 

Have a suggestion for this page?

Send your suggestions using this form.