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?

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.