We use several buttons for you to choose from, make sure you apply only styles intended for a given element, to make sure it doesn’t stand out too much or doesn’t bear a different meaning.

Button

Buttons are used as general UI blocks, for pretty much anything that requires an action to be taken. Always ensure a button has an informative label.

<button class="wfp-btn">Button</button>
<button class="wfp-btn active">Button</button>
<button class="wfp-btn disabled">Button</button>

Primary Button

Primary buttons are only used when there is a clear need for a call-to-action. An example of this is a Send button on an contact form, or a Subscribe button on a newsletter subscription form.

<button class="wfp-btn--primary">Button</button>
<button class="wfp-btn--primary active">Button</button>
<button class="wfp-btn--primary disabled">Button</button>

Special Buttons

Apart from primary and secondary buttons, you can also use action-specific buttons to help people identify certain actions more easily. These buttons should be used with moderation. Examples of usage can be found in Patterns section of this guide.

<button class="wfp-btn--negative">Button</button>
<button class="wfp-btn--positive">Button</button>
<button class="wfp-btn--warning">Button</button>

Sizing

You can display buttons using a variety of sizes. Below you can find all available button sizes.

<button class="wfp-btn xsmall">Button</button>
<button class="wfp-btn small">Button</button>
<button class="wfp-btn">Button</button>
<button class="wfp-btn large">Button</button>
<button class="wfp-btn xlarge">Button</button>