Working together for the ultimate brand experience

Royal Canin Design Language

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.

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>

Copied!

Heirarchy

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.

or View all products

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

Copied!

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--two">Explore Cats</button>
</div>

Copied!

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>

Copied!

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.

or View all products

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

Copied!

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>

Copied!

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

Copied!

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>

Copied!

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>

Copied!

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

Copied!

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

Copied!

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--xs" 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--xs" aria-label="Settings">
  <span class="rc-screen-reader-text">Settings</span>
</button>

Copied!

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>

Copied!

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

Copied!

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>

Copied!

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>

Copied!

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.

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.