Admin Button

Our Admin Button styles.

Class .wb-admin-button, .wb-admin-button--primary, .wb-admin-button--tonal

Our default admin style. This is typically used for admin functions when there are a lot of possible actions and there is not a clear CTA we want to drive users to. It is more functional, and draws less attention then our regular rounded button style.

<button class="wb-admin-button wb-admin-button--primary">
  Update settings
</button>
<button class="wb-admin-button">
  Update settings
</button>
<button class="wb-admin-button wb-admin-button--tonal">
  Update settings
</button>

Modifier .wb-admin-button--danger and .wb-admin-button--warning

To make the button takes on the danger or warning color. Note that this modifiefer should only be applied to buttons on white backgrounds.

<div class='wb-u-margin-b-2'>
  <button class="wb-admin-button wb-admin-button--primary wb-admin-button--danger">Danger button</button>
  <button class="wb-admin-button wb-admin-button--danger">Danger button</button>
  <button class="wb-admin-button wb-admin-button--tonal wb-admin-button--danger">Danger button</button>
</div>
<div class='wb-u-margin-b-2'>
  <button class="wb-admin-button wb-admin-button--primary wb-admin-button--warning">Warning button</button>
  <button class="wb-admin-button wb-admin-button--warning">Warning button</button>
  <button class="wb-admin-button wb-admin-button--tonal wb-admin-button--warning">Warning button</button>
</div>

Icons

Class .wb-admin-button__with-icon

Icons can be added to the left side or the right side of the button. The modifer provides the proper spacing for the icon and the button text.

<button class="wb-admin-button wb-admin-button--primary wb-admin-button--with-icon">
  Learn more
  <i class="fa fa-chevron-right" aria-hidden="true"></i>
</button>
<button class="wb-admin-button wb-admin-button--with-icon">
  <i class="fa fa-cloud-upload" aria-hidden="true"></i>
  Upload form
</button>
<button class="wb-admin-button wb-admin-button--tonal wb-admin-button--small wb-admin-button--with-icon">
  Manage
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>