Skip to content

Component library

Sidebar Footer Button component

Last updated 2 November 2026

Defines a clickable button in sidebar footer.

Live demo

Open this demo full screen

<ins-sidebar>

    <ins-sidebar-footer>

      <ins-sidebar-footer-button 
        icon="icon-lock-1">
      </ins-sidebar-footer-button>

      <ins-sidebar-footer-button 
        icon="icon-logout-1">
      </ins-sidebar-footer-button>

    </ins-sidebar-footer>

</ins-sidebar>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
icon string "" icon-close-1, icon-utilities, icon-lock-1 ... Defines icon of sidebar footer button

Event

EVENT OBJECT DESCRIPTION
insSidebarFooterButtonEvent mouseevent Execute a script when a foter button is clicked

Examples

Default State

<ins-sidebar>

   <ins-sidebar-footer>

    <ins-sidebar-footer-button>
    </ins-sidebar-footer-button>

   </ins-sidebar-footer>

</ins-sidebar>

Direct Data Source

<ins-sidebar>
 
   <ins-sidebar-footer>

      <ins-sidebar-footer-button 
        id="directDataSourceFooterBtn">
      </ins-sidebar-footer-button>

    </ins-sidebar-footer>

  </ins-sidebar>

  <script>
    var iconBtn = 'icon-notification-1';
    var directDataSourceFooterBtn = document.getElementById('directDataSourceFooterBtn')
    directDataSourceFooterBtn.addEventListener('didLoad', function(e){
      directDataSourceFooterBtn = iconBtn = 'icon-notification-1';
    });
  </script>

insSidebarFooterButtonEvent

<ins-sidebar>

  <ins-sidebar-footer>

    <ins-sidebar-footer-button 
      id="footer-btn" 
      icon="icon-lock-1">
    </ins-sidebar-footer-button>

    <ins-sidebar-footer-button 
      id="footer-btn" 
      icon="icon-logout-1">
    </ins-sidebar-footer-button>

  </ins-sidebar-footer>

</ins-sidebar>

<script>
var sel = document.querySelectorAll('ins-sidebar-footer-button[id="footer-btn"]');
for (var i = 0; i < sel.length; i++){
  sel[i].addEventListener('insSidebarFooterButtonEvent', function(event){
    alert("Hello! I am an alert box!!");
  });
};
</script>