• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

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?

• Gives users alternative to the call to action button.

When to use it?

• When action is not as important as a call to action so it shouldn’t call as much attention.
• When a button typically indicates actions that are important but not the call to action on a page.
• Can be used in isolation or in conjunction with call to action button and secondary.

When not to use it?

• 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

<button class="wmre-btn wmre-btn--primary"  >
    Primary button
</button>

<button class="wmre-btn wmre-btn--primary wmre-is--active"  >
    Primary active button
</button>

<button class="wmre-btn wmre-btn--primary wmre-btn--disabled" disabled="disabled" >
    Primary disabled button
</button>

<button class="wmre-btn wmre-btn--primary"  >
    Primary icon button
    <svg class="wmre-btn__icon wmre-btn__icon--right">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
    </svg>
</button>

<button class="wmre-btn wmre-btn--primary wmre-btn--disabled" disabled="disabled" >
    Primary icon disabled button
    <svg class="wmre-btn__icon wmre-btn__icon--right">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-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.
• Use the Dark background variant when a Secondary button will be used against a background with a dark colour, such as primary purple.

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

<button class="wmre-btn wmre-btn--secondary"  >
    Secondary button
</button>

<button class="wmre-btn wmre-btn--secondary wmre-is--active"  >
    Secondary active button
</button>

<button class="wmre-btn wmre-btn--secondary wmre-btn--disabled" disabled="disabled" >
    Secondary disabled button
</button>

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

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

Call to action buttons

<button class="wmre-btn wmre-btn--cta"  >
    Secondary button
</button>

<button class="wmre-btn wmre-btn--cta wmre-is--active"  >
    Secondary active button
</button>

<button class="wmre-btn wmre-btn--cta wmre-btn--disabled" disabled="disabled" >
    Secondary disabled button
</button>

<button class="wmre-btn wmre-btn--cta"  >
    Secondary icon button
    <svg class="wmre-btn__icon wmre-btn__icon--right">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
    </svg>
</button>

<button class="wmre-btn wmre-btn--cta wmre-btn--disabled" disabled="disabled" >
    Secondary icon disabled button
    <svg class="wmre-btn__icon wmre-btn__icon--right">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-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

<button class="wmre-btn wmre-btn--start"  >
    Start button
</button>

<button class="wmre-btn wmre-btn--start wmre-is--active"  >
    Start active button
</button>

<button class="wmre-btn wmre-btn--start wmre-btn--disabled" disabled="disabled" >
    Start disabled button
</button>

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

<button class="wmre-btn wmre-btn--start wmre-btn--disabled" disabled="disabled" >
    Start icon disabled button
    <svg class="wmre-btn__icon wmre-btn__icon--right">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-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

<button class="wmre-btn wmre-btn--destructive"  >
    Destructive button
</button>

<button class="wmre-btn wmre-btn--destructive wmre-is--active"  >
    Destructive active button
</button>

<button class="wmre-btn wmre-btn--destructive wmre-btn--disabled" disabled="disabled" >
    Destructive disabled button
</button>

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

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

Read more button

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

<div class="collapse ">
  <p>Reveal some hidden content</p>
</div>

<a href="#" title="link title" target="_self" class="wmre-link hvr-icon-hang"  data-toggle="collapse" data-target=".collapse." data-text="collapse" aria-expanded="false" data-html-text="View more" >
  
  <svg class="wmre-link__chevron wmre-link__chevron--down hvr-icon">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
    </svg>
  
</a>