Buttons

Buttons initiate actions that will occur when the user clicks or touches them. The Design Language provides a number of predefined button styles for most use cases. Buttons can carry different purposes- from styling hyperlinks to form functional buttons using a variety of sizes, colours and iconography combinations. If button visual styles are used for page based functional operations i.e buttons for form submission or interactions, then the HTML <button> tag should be used, otherwise normal <a> tags should be styled with a button class. Button sizing should be handled with the relevant classes, ensuring best display output across devices.

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.

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.

html
            <a class="rc-btn rc-btn--one" href="#/">Button label</a>
        

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.

html
            <div class="rc-button-link-group">
  <a class="rc-btn rc-btn--one" href="#/">Product Finder</a>
  <p>or <a class="rc-styled-link" href="#/"> View all products</a></p>
</div>
        

Button with inline link

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. To use button with inline link, you should wrap them in rc-button-link-group.

For more on hyperlinks style see the Hyperlinks section

html
            <div class="rc-button-link-group">
  <a class="rc-btn rc-btn--one" href="#/">Product Finder</a>
  <p>or <a class="rc-styled-link" href="#/"> View all products</a></p>
</div>
<br />
<div class="rc-button-link-group">
  <a class="rc-btn rc-btn--two" href="#/">Product Finder</a>
  <p>or <a class="rc-styled-link" href="#/"> View all products</a></p>
</div>
        

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.

html
            <div class="rc-btn-group">
   <a class="rc-btn rc-btn--one" href="#/">Explore Cats</a>
   <a class="rc-btn rc-btn--one" href="#/">Explore Dogs</a>
</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.

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:

html
            <a class="rc-btn rc-btn--two" href="#/">Button label</a>
        

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.

html
            <a class="rc-btn rc-btn--sm rc-btn--one" href="#/">Small button</a>
        
html
            <a class="rc-btn rc-btn--sm rc-btn--two" href="#/">Small button</a>
        

Hover and hit states

Interacting with our buttons does not result in a colour change as this can potentially fail on accessibility grounds; instead when a user hovers over a button the chevron arrow or relevant icon will slide in from the right edge of the button to appear inline on the right of the text label. The is a seamless 0.3 second transition, nudging the text to the left whilst retaining the width and height dimensions of the buttons original size. Padding is reduced to the left of the button to allow the text label to nudge sideways, the chevron will appear in the white space to the right of the text label, and will sit 24px away from the text. The Button transition (see visual styles) will see an icon slide in from right to left, which will also shift the button label the same number of pixels to the left. When a button is clicked or pressed a the red elements of the button become 15% darker. Button active states are handled as part of the css. SASS enables a ‘darken’ attribute to be applied to a default brand colour reference to ensure the correct active reference is always applied. In the active/hit state, as the click will only be briefly active, a darken attribute of 15% ensures the user is aware of the change to represent button click.'

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:

html
            <button class="rc-btn rc-btn--one" disabled type="button">Disabled</button>
<button class="rc-btn rc-btn--two" disabled type="button">Disabled</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.

html
            <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>
        
html
            <div class="rc-bg-colour--brand4 rc-padding--sm">
 <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="Facebook"><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="Facebook"><span class="rc-screen-reader-text">Pinterest</span></a>
</div>
        

Animated buttons

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
html
            <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.

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.'

html
            <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>
        

Badges

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.

Usage

html
            <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>
        

‘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.

Usage

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:

html
            <button class="rc-btn rc-btn--icon-label rc-icon rc-advice--xs rc-iconography" href="#/">Help</button>
<button class="rc-btn rc-btn--icon-label rc-icon rc-user--xs rc-iconography" href="#/">My Account</button>
        
html
            <button class="rc-btn rc-btn--icon-label rc-flag rc-fr" href="#/">France</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-us" href="#/">United States</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-gb" href="#/">United Kingdom</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-fr--xs" href="#/">France</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-us--xs" href="#/">United States</button>
<button class="rc-btn rc-btn--icon-label rc-flag rc-gb--xs" href="#/">United Kingdom</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.

Usage

On click of each switch button the icon and/or text should change in accordance with the data-attribute

html
            <button class="rc-btn rc-btn--icon-label rc-icon rc-plus--xs rc-iconography" 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" 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" data-rc-switch-text="Just text toggled" href="#/">Just text</button>
        

Alignment

Button alignment by default should be left aligned, however buttons can appear centre aligned or right aligned if required. Central alignment is normally saved for more visual areas of projects such as introductory banners or carousels with the new global website introductory banner being a good example of both centrally aligned buttons and copy. Right alignment is normally saved for forms, stepped submissions or simple Icon with Label hyperlinks and we do not recommend right aligning a row of ’Button One’ or ’Button Two’, only left or centrally aligning these configurations.

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 2nd November 2018 [ui_assets/elements/buttons.yml]
    Update button with link documentation
  • 10th October 2018 [ui_assets/elements/buttons.yml]
    Update docs to include info about new wrapper class.
  • 9th October 2018 [ui_assets/elements/buttons.yml]
    Add two examples of button and link grouped
  • 20th September 2018 [ui_assets/elements/buttons.yml]
    Update switch button copy
  • 19th September 2018 [ui_assets/elements/buttons.yml]
    Add examples of switch buttons
  • 13th September 2018 [ui_assets/elements/buttons.yml]
    spelling & grammar corrections
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    prefix bg-colour--brand4
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    typo
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    prefix btn__badge
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    prefix padding--sm
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    prefix styled-link
  • 25th July 2018 [ui_assets/elements/buttons.yml]
    screen reader
  • 12th July 2018 [ui_assets/elements/buttons.yml]
    Update snippets.
  • 12th July 2018 [ui_assets/elements/buttons.yml]
    Prefixed classes throughout the portal with rc-.
  • 28th June 2018 [ui_assets/elements/buttons.yml]
    Update bootstrap test page.
  • 26th June 2018 [ui_assets/elements/buttons.yml]
    add animatyed button example
  • 6th April 2018 [ui_assets/elements/buttons.yml]
    Updated spacer classes across all templates
  • 8th March 2018 [ui_assets/elements/buttons.yml]
    Updated keywords, removed old HTML files
  • 8th March 2018 [ui_assets/elements/buttons.yml]
    Added button keywords
  • 8th March 2018 [ui_assets/elements/buttons.yml]
    Adde beta badges
  • 28th February 2018 [ui_assets/elements/buttons.yml]
    Added flag buttons to buttons page
  • 27th February 2018 [ui_assets/elements/buttons.yml]
    Replaced icon classes
  • 27th February 2018 [ui_assets/elements/buttons.yml]
    Added new social icons
  • 19th February 2018 [ui_assets/elements/buttons.yml]
    Convert all multi line text to use
  • 16th February 2018 [ui_assets/elements/buttons.yml]
    Added badges docs and example to header bar
  • 1st February 2018 [ui_assets/elements/buttons.yml]
    Updated show/hide button to styled-link
  • 1st February 2018 [ui_assets/elements/buttons.yml]
    Updated button classes
  • 1st February 2018 [ui_assets/elements/buttons.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/elements/buttons.yml]
    Update button classnames
  • 29th January 2018 [ui_assets/elements/buttons.yml]
    Updated buttons page
  • 26th January 2018 [ui_assets/elements/buttons.yml]
    Updated buttons page
  • 1st December 2017 [ui_assets/elements/buttons.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/buttons.yml]
    Restructured folder order.
  • 26th October 2017 [ui_assets/elements/buttons.yml]
    Replaced all icons with correct ones
  • 19th October 2017 [ui_assets/elements/buttons.yml]
    Ensured all instances of icons now use rc-icon base class
  • 30th August 2017 [ui_assets/elements/buttons.yml]
    Refactored mentions of black/white icons to use new light/dark naming convention.
  • 29th August 2017 [ui_assets/elements/buttons.yml]
    Fix for burger menu icon.
  • 29th August 2017 [ui_assets/elements/buttons.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 21st July 2017 [ui_assets/elements/buttons.yml]
    Refactored button to match paths in config.
  • 15th July 2017 [ui_assets/elements/buttons.yml]
    Git commit message sync improvements. Folder restructure.
  • 15th July 2017 [ui_assets/elements/buttons.yml]
    Copy and markup improvements.
  • 11th July 2017 [ui_assets/elements/buttons.yml]
    Added remaining content.
  • 10th July 2017 [ui_assets/elements/buttons.yml]
    Portal twig improvements. Copied image assets to new location. Started git integration.
  • 4th July 2017 [ui_assets/elements/buttons.yml]
    Initial content. (With tests)