Buttons

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-button 
    ariaLabel="Some aria label" 
    (click)="beep()" 
    class='primary-button' 
    body='Primary buttons'>
</cpc-ds-button>

<cpc-ds-button 
 class='secondary-button' 
 body='Secondary button'>
</cpc-ds-button>

<div>
    <a 
    role="button" 
    aria-label="Microaction button focus (copy)" 
    class="micro-buttons copy" 
    href="http://msn.com" 
    target="_blank">LINK MSN</a>
</div>

a[role='button'].YOUR_CLASS:before {
  content: url('assets/img/icons/YOUR_ICON.svg');
  position: relative;
  padding-right: 10px;
  display: inline-block;
  top: 3px;
}

HTML

<script src="[JS-PLACE-HOLDER]"></script>

<button class="primary-button by-keyboard">Primary Button</button>

<button class="secondary-button by-keyboard">Secondary Button</button>

<input 
  type="submit"
  value="Submit Button"
  class="button primary-button by-keyboard">

<a 
  role="button" 
  class="micro-buttons copy by-keyboard"
  href=http://google.com
  target="_blank"
  aria-label="Microaction button focus (opens in a new window)">
  Microaction button focus
</a>

<div class="btn-group">
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 1
  </button>
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 2
  </button>
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 3
   </button>
</div>

General guidelines

Types of buttons

Interactions

States

A button is a UI element that lets users take a predetermined action. It consists of a single element, which is usually a rectangular area with a text label. A button can be a standalone element or part of a group.

Buttons can have the following states:

1. Default: In this state, the button is clickable and would trigger the intended action.
2. Hover: Using this state lets the user know that a button can be clicked.
3. Focus: A focus state highlights interactive components and is crucial for users that navigate websites without a mouse.

General guidelines

Research shows that our choice of words affects user behaviour. The right copy can help convince a user to submit a form or click to learn more about our products.

Guidelines

Keyboard interaction

When a button has focus, Spacebar or Enter must activate the button.

Things to remember when Enter activates a button:

• Focus must be set depending on the type of action the button performs.
• If activating the button doesn’t dismiss the current context, focus will typically remain on the button after activation. For example, an ‘Apply’ button.
• If the button action indicates a context change, such as adding another search criteria, focus will move to the starting point for that action.

Adding extra context

Sometimes button text doesn't give enough context. For example, a table might have a column of multiple "Select" buttons to select the respective row. In these cases, an alternate non-visible context can be provided to the button text.

Add alternate non-visible context to button text in one of the following ways:

• Set the button element aria-describedby text to the ID of the element containing the description. This should only be done if a description of the button's function is present.
• Append contextual text to the button text using a screen reader-only CSS class.
• Append an aria-label containing the contextual information to the button.

Microaction button text

When a microaction button is presented without a label, you must have off-screen text for non-sighted users to help them understand what the button does.

Testing

When testing a button, the tester must ensure:

• The button is fully keyboard operable
• Indications for the focused and the hovered states are clear and prominent
• The button is properly used for a button’s intended purpose.
• The button has the role of "button" (role=”button”)
• The screen reader announces the button label and any extra context (if applied).

Related content

• Links
• Modals