Buttons

Overview

The type of button styles used depends on the page context, message priority and importance of the task to be completed. There are 3 categories of buttons – primary, secondary and functional buttons – with guidelines for usage on white/coloured backgrounds to meet accessibility requirements.

Primary Buttons

Usage

Use a primary button to emphasize the main action that you want a user to complete in context of an entire page or within a section. Only one primary button is to be used per call to action or section. If an additional button/link is required, refer to the secondary buttons/link styles to be used in conjunction with a primary button. If used within a form, primary buttons are left-most aligned and secondary buttons/actions sit to the right of them.

Language for buttons

Button text labels should be written in sentence case, using concise English and should refer to the action the user is going to take. Avoid using vague button language such as "Click here" as it isn't considered a best practise.

Style

Visual treatment for primary buttons varies based on the colour of the background it's used on. For white backgrounds use blue, for other colours use white as long as it meets accessibility standards.

<button class="am-button am-button--primary">Primary Button</button>
<button class="am-button am-button--primary-white">White Primary Button</button>

Secondary Buttons

Usage

Secondary buttons are used more frequently to define multiple call outs/actions within a section. If used in a form, secondary buttons sit to the right of the Primary button.

Language for buttons

Button text labels should be written in sentence case, using concise English and should refer to the action the user is going to take. Avoid using vague button language such as "Click here" as it isn't considered a best practise.

Style

Visual treatment for secondary buttons varies based on the colour of the background it's used on. For white backgrounds use grey, for other colours use white as long as it meets accessibility standards.

<button class="am-button am-button--secondary">Secondary Button</button>
<button class="am-button am-button--secondary-white">White Secondary Button</button>

Linked Buttons

Usage

Link button can be used as an anchor within the page or as a button that draws less attention than the Primary and Secondary buttons.

Language for buttons

Button text labels should be written in sentence case, using concise English and should refer to the action the user is going to take. Avoid using vague button language such as "Click here" as it isn't considered a best practise.

Style

Link buttons are blue text with an hidden underline that appears when the text hovered over.

<button class="am-button am-button--link">Link Button</button>

Disabled Buttons

Usage

Disabled buttons are used for both Primary and Secondary buttons and are to be used sparingly. Generally, the use of disabled button states can be avoided by using proper error handling, but exception cases can occur. If you have an exception case, please contact ux@loyalty.com to share your scenario.

Language for buttons

Button text labels should be the exact same text that is used in the active state.

Style

Disabled buttons are grey with sharp edges and a height of 50px.

<button class="am-button am-button--primary" disabled>Disabled Button</button>
<button class="am-button am-button--primary-white" disabled>White Disabled Button</button>

Functional Buttons

Usage

Functional buttons are used to open or close the additional information and move to another information. Depending on the usage, functional buttons lead to another webpage, modal, or drawer.

Language for buttons

Button text labels should be written in sentence case, using concise English and refer to the action the user is going to take. Avoid using vague button language such as "Click here" as it isn't considered a best practise.

Style

Visual treatment for functional buttons varies based on the colour of the background it's used on. For white backgrounds use blue and grey, for other colours use white and black as long as it meets accessibility standards.

<a href="" class="am-functional-button">
  <span class="am-functional-button__text">Show more</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-plus"></span>
  </span>
</a>
<a href="" class="am-functional-button">
  <span class="am-functional-button__text">Show less</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--dark">
  <span class="am-functional-button__text">Show more</span>
  <span class="am-icon-button am-icon-button--primary-white am-functional-button--right">
    <span class="am-icon am-icon-functional-plus"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--dark">
  <span class="am-functional-button__text">Show less</span>
  <span class="am-icon-button am-icon-button--primary-white am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>
<a href="" class="am-functional-button">
  <span class="am-functional-button__text">Arrow left</span>
  <span class="am-icon-button am-icon-button--secondary am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-arrow-left"></span>
  </span>
</a>
<a href="" class="am-functional-button">
  <span class="am-functional-button__text">Arrow right</span>
  <span class="am-icon-button am-icon-button--secondary am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-arrow-right"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--dark">
  <span class="am-functional-button__text">Arrow up</span>
  <span class="am-icon-button am-icon-button--dark am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-arrow-up"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--dark">
  <span class="am-functional-button__text">Arrow down</span>
  <span class="am-icon-button am-icon-button--dark am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-arrow-down"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--light">
  <span class="am-functional-button__text">Show more</span>
  <span class="am-icon-button am-icon-button--white am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-plus"></span>
  </span>
</a>
<a href="" class="am-functional-button am-functional-button--light">
  <span class="am-functional-button__text">Show less</span>
  <span class="am-icon-button am-icon-button--white am-functional-button--right">
    <span class="am-icon am-icon-functional-secondary-minus"></span>
  </span>
</a>