Icon Button

Our Icon Button styles.

Class .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>

Modifier .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>

Modifier .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>

Modifier .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>