Buttons

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

Element: <ins-button>

Defines a clickable button.

Complete Example

Code Snippet

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

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

State - Static Data Source

Code Snippet

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

State - Disable

Code Snippet

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

State - Label Attribute

Code Snippet

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

State - Color Attribute

Code Snippet

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

State - Size Attribute

Code Snippet

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

Type - Text

Code Snippet

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

Type - Normal

Code Snippet

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

Type - Outlined

Code Snippet

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

Type - Button with Default Icon

Code Snippet

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

Type - Button with Normal Icon

Code Snippet

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

Type - Outlined with Icon

Code Snippet

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

Type - Action Icon

Code Snippet

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

Type - Options

Code Snippet

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

Type - Options-Dropdown

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>

Size - Large

Code Snippet

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

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

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

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

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

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

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

Colour - 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('onClickInsButton', function(e){
    submitButtonEl.loading = true;
    setTimeout(() => {
      submitButtonEl.loading = false;
    }, 2000);
  });
</script>

Event - onClickInsButton

Code Snippet

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

Event - onClickInsButtonOption

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('onClickInsButtonOption', function(event) {
        console.log(event.detail.label);
        alert(event.detail.option);
      });
  // Event handler for 'main button' click
    button.addEventListener('onClickInsButton', 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	""	icon-close-1, icon-lock-1, icon-logout-1 ...	Defines icon of button
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
onClickInsButton	label, data	Execute a script when button is clicked
onClickInsButtonOption	label	Execute a script when button option is clicked