Digital interactions: buttons

Introduction

Each channel within the Canadian Tire digital ecosystem has its own set of CTA button designs, optimized for the needs of that channel. While they are consistent with each other in appearance, other factors, such as sizing and responsive behaviours, change from channel to channel.

Always use the button styles indicated for your specific channel.

Universal principles

No matter which channel, there are a basic set of guidelines which all button designs must follow:

Button text is set in Title Case for English copy and Sentence case for French.

Primary & secondary buttons

Most buttons are designed with a primary and secondary style. As a general rule, only one primary button may appear within a given portal or page. For example: in emails, the primary button style may only appear in the A-spot at the top of the layout.

Exceptions

Chevrons and tertiary (text) buttons do not have alternate styles.

Button types & construction

There are four basic categories of buttons:

Flexible Width: Standard

The Standard Flexible Width button is the closest in size and behaviour to the ODP Button, along with being the most adaptable—when in doubt, use this version.

Flexible Width: Small

The Small Flexible Width button is designed for applications where space is limited. Both the dimensions and text are smaller than in standard-sized buttons—so ensure you only use this where it will remain in proportion with the rest of your typography.

Flexible Width: Large

Large Flexible Width buttons are for layouts designed at 2× (or larger) of their rendered size. For example, designing a layout at 2,000×2,000px, which will appear on a smartphones (average screen width of 1000px), use the Large button.

Note: do not simply double the size of the Standard button; the proportions are slightly different.

Fixed Width

Fixed Width buttons are for layouts with rigid grid systems, where Flexible buttons would cause the composition to look messy. You may find them too limiting in most other cases.

Fixed Width: dos and don'ts

Tertiary button

Tertiary buttons, aka text links, are useful for creating hierarchy on a layout with many links, simplifying a composition where multiple square buttons would create visual clutter and typesetting link copy that is too long to fit into a square button.

Chevron

The Chevron, based on existing ODP interface, has been designed for use in extremely tight layouts where a full-size button would be impractical. This button comes in one size only—do not alter it in any way except to change its colour.