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-link-button
Button that is often used with text or if they are within a group. By default, it has no padding. You can add padding by applying our padding utility classes. You can also override the colors by applying our color utility classes.
Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
<div class="wb-u-margin-b-2">
<button class='wb-link-button wb-u-margin-r-2'>
Download
</button>
<button class='wb-link-button wb-u-margin-r-2'>
Edit
</button>
<button class='wb-link-button wb-u-margin-r-2'>
<i class="fa fa-plus" aria-hidden="true"></i>
Add
</button>
<a href='#' class='wb-link-button wb-u-margin-r-2 wb-color-danger'>
<i class="fa fa-trash" aria-hidden="true"></i>
Remove
</a>
</div>
<p class='wb-text'>
Call me Ishmael. Some years ago — never mind how long precisely — having little
or no money in my purse, and nothing particular to interest me on shore, I
thought I would sail about a little and see the watery part of the world.
</p>
<div class="wb-u-margin-b-2">
<button class='wb-link-button'>
Add
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
<div>
<a href='#' class='wb-link-button wb-color-danger'>
Remove
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>.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>