Our Icon Button styles.
.wb-icon-button
, .wb-icon-button--primary
, .wb-icon-button--tonal
Our default icon style. Note that you typically want to add an
aria-label
to the button so screen readers know what the button is for. You
also want to apply aria-hidden: true
to the icon itself.
<button class="wb-icon-button wb-icon-button--primary" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--tonal" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
.wb-icon-button--inverse
, .wb-icon-button--primary-inverse
, .wb-icon-button--tonal-inverse
Our default icon style. Note that you typically want to add an
aria-label
to the button so screen readers know what the button is for. You
also want to apply aria-hidden: true
to the icon itself.
<button class="wb-icon-button wb-icon-button--primary-inverse" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--inverse" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--tonal-inverse" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
.wb-icon-button--small
This changes the icon button to a small version. It adjusts the
icon size as well so be sure to have .wb-icon-button__icon
applied to the icon
itself.
<button class="wb-icon-button wb-icon-button--small wb-icon-button--primary" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--small" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--tonal wb-icon-button--small" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
.wb-icon-button--selected
Sometimes the icon button acts more like a toggle. In that case,
use wb-icon-button--selected
to show it in the selected state. This can be
applied to a regular or tonal button, but shouldn't be used for a primary button.
Selected state
Unselected state
<p>Selected state</p>
<button class="wb-icon-button wb-icon-button--small wb-icon-button--selected" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--tonal wb-icon-button--small wb-icon-button--selected" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<br/>
<br/>
<p>Unselected state</p>
<button class="wb-icon-button wb-icon-button--small" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>
<button class="wb-icon-button wb-icon-button--tonal wb-icon-button--small" aria-label="Email">
<i class="wb-icon-button__icon fa fa-envelope" aria-hidden="true"></i>
</button>