Our button styles
.wb-button
Our default button style
<button class="wb-button">Button label</button>
<a href="#" class="wb-button">Button label</a>.wb-button--primary
When your button needs more attention. Can be used alone
or paired with a default wb-button.
<button class="wb-button wb-button--primary">Button label</button>
<a href="#" class="wb-button wb-button--primary">Button label</a>.wb-button--inverse
Default button when used on blue background.
<button class="wb-button wb-button--inverse">Button label</button>
<a href="#" class="wb-button wb-button--inverse">Button label</a>.wb-button--primary-inverse
Primary button when used on blue background.
<button class="wb-button wb-button--primary-inverse">Button label</button>
<a href="#" class="wb-button wb-button--primary-inverse">Button label</a>.wb-button--large
To make the button larger. Used to really call out a CTA.
<button class="wb-button wb-button--large">Button label</button>
<button class="wb-button wb-button--primary wb-button--large">Button label</button>.wb-button--small
Makes the button smaller. Usually contains just a single verb for the action.
<button class="wb-button wb-button--small">Add</button>
<button class="wb-button wb-button--primary wb-button--small">Delete</button>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,
but for this example we'll only show the default and primary style.
<button class="wb-button" disabled>Button label</button>
<a href="#" class="wb-button" aria-disabled="true">Button label</a>
<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>.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>.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.
<button class="wb-button wb-button--danger">Danger button</button>
<button class="wb-button wb-button--primary wb-button--danger">Danger button</button>
<button class="wb-button wb-button--warning">Warning button</button>
<button class="wb-button wb-button--primary wb-button--warning">Warning button</button>.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.
<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--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>.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>.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>