Toggle Button

Icon toggle is used to switch between two possible states displayed with icons.

Class Type
toggle-button Icon Toggle A class representing an icon toggle. 
<div class="toggle-button">
  <ul class="toggle-button-list">
    <li class="toggle-button-item">
      <button class="toggle-button-element" aria-label="List View">
        <span class="icon-view-list" aria-hidden="true"></span>
      </button>
    </li>
    <li class="toggle-button-item">
      <button class="toggle-button-element is-selected" aria-label="Grid View">
        <span class="icon-view-grid" aria-hidden="true"></span>
      </button>
    </li>
  </ul>
</div>

Components

Icons Toggle inner parts are:

Class Type
toggle-button-list A class that wraps both toggle items
toggle-button-item A class that wraps one toggle item
toggle-button-element An icon button

States

To disable the toggle, add the following attribute:

Attribute Type
disabled Disabled Use whenever clicking on a toggle isn’t allowed. 
<div class="toggle-button">
  <ul class="toggle-button-list">
    <li class="toggle-button-item">
      <button class="toggle-button-element" disabled aria-label="List View">
        <span class="icon-view-list" aria-hidden="true"></span>
      </button>
    </li>
    <li class="toggle-button-item">
      <button class="toggle-button-element is-selected" disabled aria-label="Grid View">
        <span class="icon-view-grid" aria-hidden="true"></span>
      </button>
    </li>
  </ul>
</div>

Icon Toggle with Tooltip

In the Appwrite console, we display a tooltip on hover, as shown below:


<div class="toggle-button">
  <ul class="toggle-button-list">
    <li class="toggle-button-item">
      <button class="toggle-button-element tooltip">
        <span class="icon-view-list" aria-hidden="true"></span>
        <span class="tooltip-popup is-bottom is-center" role="tooltip">List View</span>
      </button>
    </li>
    <li class="toggle-button-item">
      <button class="toggle-button-element is-selected tooltip">
        <span class="icon-view-grid" aria-hidden="true"></span>
        <span class="tooltip-popup is-bottom is-center" role="tooltip">Grid View</span>
      </button>
    </li>
  </ul>
</div>
<br />