PATTERN OVERVIEW

A family of button styles is available to help establish the right hierarchy for calls-to-actions and user actions.

Button styles:

• The "basic" button (solid blue) is used for the main or most important actions on a page since it commands the most attention. Typically, no more than one or two are present on a page to help place emphasis on the primary action(s). This button is available in three sizes ("basic", "large" and "full-width").
  
  
• The "basic reverse" button (white button with blue type) is used for secondary actions or tertiary content. This button is available in three sizes ("basic reverse", "large reverse" and "full-width"). 
  • Color block component button variation: Over top a Black, Off Black, Gray Darker, Gray Dark or Gray color block the "basic reverse" button appears with white type and an outline with a transparent background).
• Forms: The "basic" button is used as the submit button on the progressive form. The "full-width" button can be used at the bottom of a form as the submit or download button. 
  
  
• Basic and reverse buttons (authored inside of the text3 editor) are available with the following icons embedded within the button:
  
  • Video: .oi-video* 
    
  • Calendar: .oi-calendar
  • List view: .oi-list
  • Download: .oi-download
  • Email contact: oi-email
  • Location: oi-location
  • Lock: .oi-lock (links to a secure sign-in)
  • Podcast: .oi-wifi
  • Document: .oi-document (download a PDF)

* This button is used to link to a video landing page and cannot be added to open a video in modal window overtop the button.

• The "button link" (blue type with chevron) is used for secondary actions, tertiary content or when multiple links are present on a page. This option can only be used on a white or light gray (Off-White) background.
  
  
• A hyperlink is created when adding a link to body copy. The copy appears blue (#006CA2) with an underline on rollover.
   

AEM component: Button styles are applied using the Button Style Picker available in the AEM text3 editor.

Some components, have built in button defaults and the style cannot be overriden. For example, the sub hero and hero banner default to the basic button with a chevron.

Guidelines

• Label a button with what it does so it makes sense when read out of context, rather than using a generic label such as "OK" or "Click". This will assure it is accessible to users with a screen reader.
  
  
• Use as few words as possible and the button label MUST remain on a single line when viewed on desktop, tablet and mobile devices.
  
  
• Buttons including an icon will help speed users' comprehension and add visual interest to the CTA. 
  
  
• A button label should use sentence case with the exception of the following approved words and acronyms listed on the exceptions list. 
  
  • Requests to have an acronym added to the exceptions list can be made by contacting your Web Strategist.
    
  • A workaround can be achieved by using the acronym in the supporting copy above the button/CTA or by using a button link for the CTA.
• A button link permits the use of an acronym or initial caps only when necessary. 

Approved color combinations

• The solid blue button over top a white or light gray (Off-White) background has the most emphasis. 
  
  
• Adding a solid blue overtop the Dark Gray, Off Black or Black background reduces the constrst and therefore has less emphasis.
  

• Color block component: 
  • It is recommended that the reverse button be used on all color options other than white and light gray (Off-White). 
  • On a Black, Off Black or Dark Gray color block the button will automatically appear with a white outline and white text.
• A solid or reverse button can be used over top a background image. Be sure that the color contrast between the background image and color of the button meets the WCAG 2.2 AA contrast ratio of 4.5:1. 

• Button link:
  • Use a button link over top a white or light gray (Off-White) background only.
    
  • A button link should not used on top of a Dark Gray, Off Black or Black  background.

Specifications

Character count limits: The goal is to use as few words as possible (three words or less) and no more than 25 characters. 

Type: Use sentence case, no punctuation.

Button alignment: Typically left-aligned and centered only when used in conjunction with copy that is centered.