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