Icons Toggle
Icons Toggle is used to switch between two possible states displayed with icons.
| Class | Type | |
|---|---|---|
icons-toggle
|
Icons Toggle | A class representing a Icons Toogle |
<div class="icons-toggle">
<ul class="icons-toggle-list">
<li class="icons-toggle-item">
<button class="icons-toggle-button" aria-label="List View">
<span class="icon-view-list" aria-hidden="true"></span>
</button>
</li>
<li class="icons-toggle-item">
<button class="icons-toggle-button 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 | |
|---|---|---|
icons-toggle-list
|
A class that wraps both toggle items | |
icons-toggle-item
|
A class that wraps one toggle item | |
icons-toggle-button
|
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="icons-toggle">
<ul class="icons-toggle-list">
<li class="icons-toggle-item">
<button class="icons-toggle-button" disabled aria-label="List View">
<span class="icon-view-list" aria-hidden="true"></span>
</button>
</li>
<li class="icons-toggle-item">
<button class="icons-toggle-button is-selected" disabled aria-label="Grid View">
<span class="icon-view-grid" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
Icon Toggle Combined with tooltip
<div class="icons-toggle">
<ul class="icons-toggle-list">
<li class="icons-toggle-item">
<button class="icons-toggle-button 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="icons-toggle-item">
<button class="icons-toggle-button 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 />