Buttons

Primary buttons

To initiate the main action of a page.


        <button class="btn btn--3d btn--primary">
              Submit
        </button>
        <button class="btn btn--3d btn--primary btn--large">
              Send
        </button>
  

How to use this pattern

Primary action button should initiate a task (eg submit a form). Not be used to link to another site / more information.

When a primary action needs to be more noticable amongst content (eg 'Book now' button on an events page) use class btn--large.

Subtle buttons

A discreet function button, typically used for sign up for extra services (email list, podcasts etc). Less important functions can be communicated with just an icon.


        <button class="btn btn--3d">
              <strong>Sign up for blog updates by email</strong>
        </button>
        <button class="btn btn--3d btn--square">
          <span class="icon icon-rss icon--blue"></span>
          <span class="visuallyhidden">
              RSS
          </span>
        </button>
  

Technical implementation

If an icon is used on a button without any text, you must ensure that the `visuallyhidden` class is used on a `span` tag containing a label for the button. This will hide the text, but will ensure it can be read by screen readers to aid accessibility.

How to use this pattern

These buttons should used for low priority 'calls to action'. These should initiate a task (eg sumbit a form) not to be used to link to another site / more information. They must only be placed on the grey background - not on the (white) body text area. An icon only option is available for even lower priority items.

Flat buttons

Secondary action button style with solid background, generally used to surround an icon.

Expand Collapse


        <a href="#" class="btn btn--square btn--dark-blue" role="button">
          <span class="icon icon-arrow-down icon--white icon--heavy"></span>
          <span class="visuallyhidden">
              Expand
          </span>
        </a>
        <a href="#" class="btn btn--square btn--red" role="button">
          <span class="icon icon-chevron-up icon--white icon--heavy"></span>
          <span class="visuallyhidden">
              Collapse
          </span>
        </a>
  

How to use this pattern

Button style used to highlight an icon for supporting action within a larger pattern, for example expanding panels.

Rounded buttons

For use outside of the main canvas of the page (eg in the masthead) or on other ‘non-canvas’ elements. When using rounded buttons for a toggle action (eg Login/Logout) use .btn--outline to give the secondary (destructive) action less prominence. You can also use .btn--shadow to give the primary action more prominence.

Login Logout

        <a href="#" class="btn btn--rounded" role="button">
            <span class="btn__text">Login</span>
              
        </a>
    
<a href="#" class="btn btn--rounded btn--outline" role="button"> <span class="btn__text">Logout</span> </a>