Icon Button

Our Icon Button styles.

Class .wb-icon-button

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" aria-label="Email">
  <i class="fa fa-envelope" aria-hidden="true"></i>
</button>

Modifer .wb-icon-button--primary

When your icon button needs more attention, use the wb-icon-button--primary modifier.

<button class="wb-icon-button wb-icon-button--primary" aria-label="Email">
  <i class="fa fa-envelope" aria-hidden="true"></i>
</button>