Button Types

There are 3 types of buttons; Primary, Secondary and Tertiary. Each of those has different colors to suit different actions (to convey meaning). The CSS below is the base style for all buttons. All button styles have specific override deviations from the button base style — all documented on this page.

Button basics

CSS: Button Basics

/* Button */
border-radius: 5px;
padding: 0 50px;
font-family: Apercu-Bold;
font-size: 14px;
text-align: center;

Primary Button

There are 4 different types of primary button, each has guidelines on their correct usage. See below: Action, Navigation, Light and Cancel.

  • Primary buttons pair best with Tertiary buttons.
  • Used for actionable and navigational links to a new page, submit content, or continue to a next step.
  • All primary buttons share the same disabled state.

CSS: Same as button basics, with the following differences:

/* Primary button */
height: 44px;

/* Disabled */
background-color: $gray30;
color: $white;

Primary Action Button

  • Should be used for key, or the most important action on a page (e.g. main CTA on the home page, or log in, or submit).
  • Used for 'actions' like booking, signing up, logging in, saving, updating, paying or submitting.
  • If the button is not a key action, but to navigate to another page, consider using the Primary Navigation or Primary Light button style instead.
  • Try not to include too many primary action buttons on the same page — focus on one main objective. More than a one action button is likely too much choice.
  • Pairs well with a Secondary Action button.

Primary Action Button

CSS: Same as Primary, plus:

/* Primary Action */
background-color: $yellow50;
color: $black50;

/* :hover */
background-color: $yellow60;

Primary Navigation Button

  • Used for navigational links to other pages.
  • Note: A Primary Action button can also be used for navigational links, if the link is a high priority action (e.g. the solo button/link on the home page).
  • Pairs well with a Tertiary Navigation button.

Primary Navigation Button

CSS: Same as Primary, plus:

/* Primary Navigation */
background-color: $blue50;
color: $white;

/* :hover */
background-color: $blue60;

Primary Light Button

  • Use only to overlay images or dark color backgrounds.
  • Never use on a light background color.
  • Used sparingly as an alternative to a Primary Navigation button, when blue doesn't work well (e.g. overlaying an image).
  • Pairs well with a Secondary Light or Tertiary Light button.
  • Avoid using as the main call to action for a page — consider using the Primary Action button for important CTAs.

Primary Light Button

CSS: Same as Primary, plus:

/* Primary Light */
background-color: $white;
color: $black50;

/* :hover */
background-color: $yellow30;

/* Disabled */
background-color: $white;
color: $black50;
opacity: 0.1;

Primary Cancel Button

  • Used sparingly to clearly communicate the intent to cancel or delete something.
  • More appropriate to product scenarios, than marketing.

Primary Cancel Button

CSS: Same as Primary, plus:

/* Primary Cancel */
background-color: $red50;
color: $white;

/* :hover */
background-color: $red60;

Secondary Button

  • For navigation to other content on the same page — to anchor up/down the page.
  • If the link leads to a different page, consider using a Primary button.
  • Can be used to navigate to content on other pages in special circumstances, if a Primary button style doesn't work so well.
  • Never pair with a Tertiary button (use a Primary button to pair with a tertiary).

CSS: Same as button basics, with the following differences:

/* Secondary button */
height: 40px;
border: 2px solid;
background: none;

/* Disabled (secondary) */
border-color: $gray30;

Secondary Action Button

  • Not for use on its own.
  • Secondary action oriented button to pair with a Primary Action button.

Secondary Action Button

CSS: Same as Primary, plus:

/* Secondary Action */
background-color: $yellow30;
color: $black50;

/* :hover */
background-color: $yellow40;

Secondary Navigation Button

  • Primary use to link/anchor to content on the same page, for use on a light background.
  • If the button navigates to a different page, use the 'solid' Primary Navigation button instead.

Secondary Navigation Button

CSS: Same as Secondary, plus:

/* Secondary Navigation */
border-color: $blue50;
color: $blue50;

/* :hover */
border-color: $blue70;
color: $blue70;

Secondary Light Button

  • Link/anchor to content on the same page, for use on a dark background, or image.
  • Never use on a light background color.

Secondary Light Button

CSS: Same as Secondary, plus:

/* Secondary Light */
border-color: $white;
color: $white;

/* :hover */
border-color: $yellow30;
color: $yellow30;

/* Disabled (secondary — light) */
border-color: $white;
color: $white;
opacity: 0.2;

Tertiary Button

  • Tertiary buttons can be used in isolation, for less prominent actions, or paired with a Primary or Secondary button, or multiple CTAs around the same subject (see some example use cases).
  • A Tertiary button has the same dimensions (height) as primary and secondary, only it has no background or border color.

CSS: Same as button basics, with the following differences:

/* Tertiary button */
background: none;
padding: 0;
text-align: left;

/* Disabled (tertiary) */
color: $gray30;

Tertiary Navigation Button

  • Use for navigational links to other pages.
  • Works well paired with a Primary Navigation button.

Tertiary Navigation Button

CSS: Same as Tertiary, plus:

/* Tertiary Navigation */
color: $blue50;

/* :hover */
color: $blue70;

Tertiary Light Button

  • Use for navigational links to other pages.
  • Use only to overlay images or dark color backgrounds.
  • Never use on a light background color.
  • Works well paired with a Primary Light button.

Tertiary Light Button

CSS: Same as Tertiary, plus:

/* Tertiary Light */
color: $white;

/* :hover */
color: $yellow30;

/* Disabled */
color: $white;
opacity: 0.2;

results matching ""

    No results matching ""