Button One

Button one should be used in areas of high importance, usually as part of the main focus of an objective for a page or application, the main call to action. It should be considered that no more than one primary call to action be used per page.

Single usage

This button should be used stand alone as the main call to action on a page or section. Button text follows normal capitalisation rules where the first letter of the first word will always be written in uppercase with all additional words being in lowercase except for pronouns where appropriate. Button one can only ever appear on backgrounds of ‘Brand3’ and ‘Brand4’; never on ‘Brand1‘ or ‘Brand2’ due to accessibility issues.

<button class="rc-btn rc-btn--one">Button One</button>

Hierarchy

To ensure the user understands the hierarchy of the button importance and to avoid any confusion only a single ‘button one’ should be used for a main call to action per screen. It should never be doubled up to sit side by side or stacked. If another call to action is required to sit alongside a button, it should use our hyperlink style inline.

<p>
  <button class="rc-btn rc-btn--one">Button One</button>
  or
  <a class="rc-styled-link" href="#/">View all products</a>
</p>

Exceptions

There can be specific situations where two of these buttons may need to sit together (for example ‘My Dog’ and ‘My Cat’ if these are our two core journeys that we’d expect a user to take) but the doubling up of this button should be avoided elsewhere unless absolutely necessary. In this specific case, a ‘button group’ can be used in order to align the button correctly.

<div class="rc-btn-group">
  <button class="rc-btn rc-btn--one">Explore Dogs</button>
  <button class="rc-btn rc-btn--one">Explore Cats</button>
</div>

Button Two

Button two should be considered as a general use button to be used throughout projects. It has the right balance of our ‘Brand 1‘ colour without overuse and allows button one to be used for higher visual impact where needed.

Single usage

This button can be used stand alone or in a row of the same style of buttons when there is perhaps more than one call to action for a section; this ideally would only be one or two additional buttons making up a row. Button copy follows normal capitalisation rules where the first letter of the first word will always be written in uppercase with all additional words being in lowercase. Due to the transparent background on these buttons they can only appear in this form on ‘Brand3’, and ‘Brand4’ colours. Buttons that appear in rows can also be stacked when screen space is at a premium (mobile devices specifically). These buttons become 100% in width and are reduced in height to Small sizings whilst still retaining the same margin between as they would when side by side.

<button class="rc-btn rc-btn--two">Button Two</button>

Combining button styles

We advise to not use a mixture of ‘Button One‘ and ‘Button Two‘ together in a row or set, this is not a solution to a primary and secondary call to action. More consideration should be taken from a user experience point of view on where buttons should be used for a primary call to action before ‘Button Two‘ is implemented across more of a page or application for secondary or other calls to action. If a definitive primary and secondary call to action are required to sit together (for example one call to action is deemed to be of higher importance than the other but they need to sit within the same section or panel as a rule) we have a solution to this which should only use the general button style, paired with our hyperlink style. For more on hyperlinks style see the Hyperlinks section.

<p>
  <button class="rc-btn rc-btn--two">Button Two</button>
  or
  <a class="rc-styled-link" href="#/">View all products</a>
</p>

Button Sizes

Buttons are available in two sizes, Normal and Small. By default and responsively a Normal button becomes a Small button but Small buttons may also be used on larger screen sizes when space is at a premium.

<button class="rc-btn rc-btn--sm rc-btn--one">Button One</button>

<button class="rc-btn rc-btn--sm rc-btn--two">Button Two</button>

Disabled/inactive Buttons

Inactive buttons can be used as part of form validation. For example you may have a high impact button as the only call to action on a form to submit a user‘s details, however we may require this button to be disabled or inactive until a user correctly fills out data within the form, thus enabling the button to be clicked once all fields are complete. Here are examples of how we correctly implement inactive buttons using the ‘Interface’ colour.

<button class="rc-btn rc-btn--one" disabled="">Disabled button</button>
<button class="rc-btn rc-btn--two" disabled="">Disabled button</button>

Action Buttons

Action buttons are buttons which perform a specific or unique function and so are aided or are entirely focused on the use of iconography to describe or enhance their meaning. These visual cues can either support our default Button styles already documented, or be completely self contained entities such as a stand alone circular menu button for an application for example.

Usage

The animation properties for action buttons on hover differs from Button One and Button Wwo. This is normally due to the predominant animation of those buttons revealing an icon on hover whereas Action buttons already contain this element more often than not. Therefore animations for these types of buttons add an outer border of 2px in the same brand colour to subtly give a larger size to the buttons and use our standardised transition speed and properties to reveal this border.

<button class="rc-btn rc-btn--action rc-icon rc-plus--xs rc-brand3" aria-label="Add">
  <span class="rc-screen-reader-text">Add</span>
</button>
<button class="rc-btn rc-btn--action rc-icon rc-minus--xs rc-brand3" aria-label="Remove">
  <span class="rc-screen-reader-text">Remove</span>
</button>

<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" href="#" aria-label="facebook">
  <span class="rc-screen-reader-text">facebook</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-twitter--xs" href="#" aria-label="twitter">
  <span class="rc-screen-reader-text">twitter</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-youtube--xs" href="#" aria-label="youtube">
  <span class="rc-screen-reader-text">youtube</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-instagram--xs" href="#" aria-label="instagram">
  <span class="rc-screen-reader-text">instagram</span>
</a>
<a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-pinterest--xs" href="#" aria-label="pinterest">
  <span class="rc-screen-reader-text">pinterest</span>
</a>

<div id="plus-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<button class="rc-btn rc-btn--action rc-icon rc-plus--xs rc-brand3 rc-interactive-button" aria-label="Plus" data-tooltip="plus-tooltip" data-tooltip-placement="top">
  <span class="rc-screen-reader-text">Click interaction</span>
</button>

Icon Buttons

Icon buttons are buttons that either rely on or are supported by iconography. These types of button follow different style properties to standard buttons and have different properties for hover and disabled styling.

Standard Usage

The icons portrayed here are presented as an existing use case in the Design Language only. They inform users of a search facility and a menu. These are not simply standalone icons laid out in a page. In this use case the icons have their own touch areas and active states. Active states depicted here use the ’Brand1’ colour on the active icon which is switched from the menu icon to a close icon (to hide and show the mobile menu) and an active colour is applied to the background colour of the button area of ‘Brand4’ for a subtle change in inactive to active state. Touch areas and interactivity of these animated elements are demonstrated below. Accessibility should be taken into account with icon buttons, with the use of aria-label containing a suitable description of the icon used and also text with our screen-reader class applied.

<button class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography" aria-label="Search">
  <span class="rc-screen-reader-text">Search</span>
</button>
<button class="rc-btn rc-btn--icon rc-icon rc-settings--xs rc-iconography" aria-label="Settings">
  <span class="rc-screen-reader-text">Settings</span>
</button>

Icon with Label Button

Buttons can also have a related icon aligned to the left hand side of them which also changes the style of the button, its text style and has its own unique hover styling which effects the icon as well as the text. These buttons can also sit next to one another or be stacked vertically. On hover of Icon with Labels such as the above example the icon and text label should both transition to the ‘Brand1’ colour as in the following.

<button class="rc-btn rc-btn--icon-label rc-icon rc-advice--xs rc-iconography">Help</button>
<button class="rc-btn rc-btn--icon-label rc-icon rc-user--xs rc-iconography">My Account</button>

<button class="rc-btn rc-btn--icon-label rc-flag rc-fr">France</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-us">United States</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-gb">United Kingdom</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-fr--xs">France</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-us--xs">United States</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-gb--xs">United Kingdom</button>

Badge Button

Notification badges are used for highlighting totals or messages within items such as baskets, user account areas or applications. They are flexible to show numbers between 1 and 3 digits in length by transforming from a circle for 1 digit to an expandable pill shape for 2+ digits.

<button class="rc-btn rc-btn--icon rc-icon rc-user--xs rc-iconography" aria-label="User">
  <span class="rc-badge rc-btn__badge"></span>
  <span class="rc-screen-reader-text">User</span>
</button>
<button class="rc-btn rc-btn--icon rc-icon rc-user--xs rc-iconography" aria-label="User">
  <span class="rc-badge rc-btn__badge">4</span>
  <span class="rc-screen-reader-text">User</span>
</button>
<button class="rc-btn rc-btn--icon rc-icon rc-user--xs rc-iconography" aria-label="User">
  <span class="rc-badge rc-btn__badge">258</span>
  <span class="rc-screen-reader-text">User</span>
</button>

Switch Button

Switch buttons will toggle the text and/or icon when the button is clicked. data-rc-switch-icon takes an array, where the first item must match the icon class initially applied to the button. The second item will be the icon class you wish to switch to. data-rc-switch-text takes a string.

<button class="rc-btn rc-btn--icon-label rc-icon rc-plus--xs rc-iconography--xs" data-rc-switch-icon="["rc-plus--xs", "rc-minus--xs"]" data-rc-switch-text="Close" href="#">Open</button>
<button class="rc-btn rc-btn--icon-label rc-icon rc-rate--xs rc-iconography--xs" data-rc-switch-icon="["rc-rate--xs", "rc-rate-fill--xs"]" href="#">Just icon</button>
<button class="rc-btn rc-btn--icon-label rc-icon rc-user--xs rc-iconography--xs" data-rc-switch-text="Just text toggled" href="#">Just text</button>