Our button styles
.wb-button, .wb-button--primary, .wb-button--tonal
Our button styles is .wb-button. To increase prominence, add
.wb-button--primary. To decrease prominence, apply .wb-button--tonal.
.wb-button--primary can be paird wtih .wb-button, while the tonal
button style is used more when you have consecutive call to actions and none
of them should be more prominent than others (like a series of possible actions).
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary">Button label</button>
<a href="#" class="wb-button wb-button--primary">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button">Button label</button>
<a href="#" class="wb-button">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--tonal">Button label</button>
<a href="#" class="wb-button wb-button--tonal">Button label</a>
</div>.wb-button--inverse, .wb-button--primary-inverse, .wb-button--tonal-inverse
Use these styles when buttons are on blue background.
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary-inverse">Button label</button>
<a href="#" class="wb-button wb-button--primary-inverse">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--inverse">Button label</button>
<a href="#" class="wb-button wb-button--inverse">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--tonal-inverse">Button label</button>
<a href="#" class="wb-button wb-button--tonal-inverse">Button label</a>
</div>.wb-button--large, .wb-button--small
To make the button larger or smaller. Large button is used to really call out a CTA, while the small button usually contains just a single verb or action.
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary wb-button--large">Take action</button>
<button class="wb-button wb-button--large">Take action</button>
<button class="wb-button wb-button--tonal wb-button--large">Take action</button>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary wb-button--small">Add</button>
<button class="wb-button wb-button--small">Add</button>
<button class="wb-button wb-button--tonal wb-button--small">Add</button>
</div>disabled and aria-disabled=true
Disabled buttons are shown with 60% opacity, and can be applied
to any button style. Please note that the correct way to disable a <button>
is to add the disabled attribute, while <a> should be disabled with
aria-disabled=true. These attributes can be applied to any button style,
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary" disabled>Button label</button>
<a href="#" class="wb-button wb-button--primary" aria-disabled="true">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button" disabled>Button label</button>
<a href="#" class="wb-button" aria-disabled="true">Button label</a>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--tonal" disabled>Button label</button>
<a href="#" class="wb-button wb-button--tonal" aria-disabled="true">Button label</a>
</div>.wb-button--block
To make button expand full width of parent container. Note that
.wb-button--block adds top margin to any direct siblings of the same class
to give each button the proper vertical spacing.
<a href="#" class="wb-button wb-button--primary wb-button--block">Block level button</a>
<button class="wb-button wb-button--block">Block level button</button>
<button class="wb-button wb-button--tonal wb-button--block">Block level button</button>.wb-button--danger and .wb-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-button wb-button--primary wb-button--danger">Danger button</button>
<button class="wb-button wb-button--danger">Danger button</button>
<button class="wb-button wb-button--tonal wb-button--danger">Danger button</button>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary wb-button--warning">Warning button</button>
<button class="wb-button wb-button--warning">Warning button</button>
<button class="wb-button wb-button--tonal wb-button--warning">Warning button</button>
</div>.wb-button__icon-right and wb-button__icon-left
Icons can be added to the left side or the right side of the button. The class
must be added to a <span> wrapping the icon.
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary">
Learn more
<span class="wb-button__icon-right" aria-hidden="true">
<i class="fa fa-chevron-right"></i>
</span>
</button>
<button class="wb-button">
<span class="wb-button__icon-left" aria-hidden="true">
<i class="fa fa-cloud-upload"></i>
</span>
Upload form
</button>
<button class="wb-button wb-button--tonal">
<span class="wb-button__icon-left" aria-hidden="true">
<i class="fa fa-cloud-upload"></i>
</span>
Upload form
</button>
</div>
<div class='wb-u-margin-b-2'>
<button class="wb-button wb-button--primary wb-button--small">
<span class="wb-button__icon-left" aria-hidden="true">
<i class="fa fa-refresh"></i>
</span>
Refresh
</button>
<button class="wb-button wb-button--small">
Manage
<span class="wb-button__icon-right" aria-hidden="true">
<i class="fa fa-chevron-down"></i>
</span>
</button>
<button class="wb-button wb-button--tonal wb-button--small">
Manage
<span class="wb-button__icon-right" aria-hidden="true">
<i class="fa fa-chevron-down"></i>
</span>
</button>
</div>.wb-button__icon--small
If the icon feels too big for the button text, use .wb-button__icon-small to
scale the icon down by 80%.
<button class="wb-button">
<span class="wb-button__icon-left wb-button__icon--small" aria-hidden="true">
<i class="fa fa-plus"></i>
</span>
Invite users
</button>
<button class="wb-button wb-button--primary wb-button--small">
<span class="wb-button__icon-left wb-button__icon--small" aria-hidden="true">
<i class="fa fa-times"></i>
</span>
Remove
</button>
<button class="wb-button wb-button--tonal wb-button--small">
<span class="wb-button__icon-left wb-button__icon--small" aria-hidden="true">
<i class="fa fa-times"></i>
</span>
Remove
</button>.wb-button--sign-post and .wb-button__sign-subtext
Use this button when you want to guide the user to a page. The
style should only be applied to an <a> and never to a <button>.
.wb-button__sign-subtext is optional, but strongly encouraged. This button
style should only be used on a blue background!
<a href="#" class="wb-button wb-button--sign-post">
Go here
<span class='wb-button__sign-subtext'>You won't be eaten. We promise.</span>
</a>.wb-highlighted-button
A highlighted button style that is visually different from the standard rounded button.
<button class='wb-highlighted-button'>Highlighted Button</button>
<a href='#' class='wb-highlighted-button'>Highlighted Button</a>.wb-highlighted-button--inverse
Inversed style, used when the button is on a blue background.
<button class='wb-highlighted-button wb-highlighted-button--inverse'>Highlighted Button</button>
<a href='#' class='wb-highlighted-button wb-highlighted-button--inverse'>Highlighted Button</a>