Skip to main content

This is a new service - your feedback will help us to improve it.

Buttons


About

Buttons should be used in situations where a user might need to preform an action, such as:

  • Submitting a form
  • Uploading
  • Specify a next or previous step in a process
  • Begin a new task

There are two types of button used in this design system - buttons and link buttons:

  • A button performs an action on a page
  • A link button takes the user to a different page

Icons should only be used where it is deemed absolutely necessary to communicate the meaning of an action.




Primary buttons

What does it do?

  • Encourages the most desired action you want visitors to take.
  • Attracts attention on the page.

When to use it?

  • When you need a strong visual indicator to help user to complete their journey and do their task.
  • When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.

When not to use it?

  • What action you want users to take is not essential in completing their task.
  • When a button is a destructive action.
  • When a button starts a process or journey.

Component example

HTML Markup

<button class="wmcads-btn" >
    Call to action button
</button>
<button class="wmcads-btn wmcads-is--active" > Call to action active button </button>
<button class="wmcads-btn wmcads-btn--disabled" disabled="disabled"> Call to action disabled button </button>
<button class="wmcads-btn" > Call to action icon button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>
<button class="wmcads-btn" > Call to action loading button<!-- btn sized loader --> <div class="wmcads-loader wmcads-loader--btn wmcads-btn__icon wmcads-btn__icon--right" role="alert" aria-live="assertive"> <p class="wmcads-loader__content">Content is loading...</p> </div> </button>
<button class="wmcads-btn wmcads-btn--disabled" disabled="disabled"> Call to action icon disabled button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>
<button class="wmcads-btn" > Long Call to action icon button Lorem ipsum dolor sit amet <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>



Secondary buttons

What does it do?

  • Indicates action that is less important than call to action primary.
  • When used together with call to action and primary button it creates visual hierarchy.
  • Highlights an inessential action.

When to use it?

  • To indicate lower priority than call to action and primary button.
  • To create a clear hierarchy of priority and importance of actions.
  • When a button is inessential for continuing the user journey.

When not to use it?

  • When you need a strong visual indicator to help user to complete their journey and do their task.
  • When a button is essential for continuing the user journey
  • When a button is a destructive action
  • When a button starts a process or journey

Component example

HTML Markup

<button class="wmcads-btn wmcads-btn--secondary" >
    Secondary button
</button>
<button class="wmcads-btn wmcads-btn--secondary wmcads-is--active" > Secondary active button </button>
<button class="wmcads-btn wmcads-btn--secondary wmcads-btn--disabled" disabled="disabled"> Secondary disabled button </button>
<button class="wmcads-btn wmcads-btn--secondary" > Secondary icon button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>
<button class="wmcads-btn wmcads-btn--secondary wmcads-btn--disabled" disabled="disabled"> Secondary icon disabled button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>



Destructive buttons

What does it do?

  • Shows that the button's action deletes or removes something

When to use it?

  • When an action is destructive
  • Example: deleting a favourite route, removing a swift card, deleting an account

When not to use it?

  • When a button starts a process or journey
  • When a button is trying to attract the user's attention

Component example

HTML Markup

<button class="wmcads-btn wmcads-btn--destructive" >
    Destructive button
</button>
<button class="wmcads-btn wmcads-btn--destructive wmcads-is--active" > Destructive active button </button>
<button class="wmcads-btn wmcads-btn--destructive wmcads-btn--disabled" disabled="disabled"> Destructive disabled button </button>
<button class="wmcads-btn wmcads-btn--destructive" > Destructive icon button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>
<button class="wmcads-btn wmcads-btn--destructive wmcads-btn--disabled" disabled="disabled"> Destructive icon disabled button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>



Start buttons

What does it do?

  • Shows that the button starts a process or journey

When to use it?

  • When a button starts a process or journey

When not to use it?

  • When a button is a destructive action
  • When a button is trying to attract the user's attention
  • When the button is inessential for continuing the user journey

Component example

HTML Markup

<button class="wmcads-btn wmcads-btn--start" >
    Start button
</button>
<button class="wmcads-btn wmcads-btn--start wmcads-is--active" > Start active button </button>
<button class="wmcads-btn wmcads-btn--start wmcads-btn--disabled" disabled="disabled"> Start disabled button </button>
<button class="wmcads-btn wmcads-btn--start" > Start icon button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>
<button class="wmcads-btn wmcads-btn--start wmcads-btn--disabled" disabled="disabled"> Start icon disabled button <svg class="wmcads-btn__icon wmcads-btn__icon--right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </button>