Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

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

Components

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.

Button Size

  • The button width on desktop should be proportional with the text inside the button. Desktop buttons are aligned to the left edge of the content container.
  • Buttons are full-width on mobile. This is so users can easily tap on a button without stretching their thumb.

Call to action 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'.
  • Use the Dark background variant when a Call to action button will be used against a background with a dark colour, such as primary purple.

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.


HTML markup
<button class="wmnds-btn" type="button">
  Call to action button
</button>

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

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

Dark background variant



HTML markup
<button class="wmnds-btn wmnds-btn--dark-bg" type="button">
  Call to action dark bg button
</button>

<button class="wmnds-btn wmnds-is--active wmnds-btn--dark-bg" type="button"> Call to action dark bg active button </button>

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

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


HTML markup
<button class="wmnds-btn wmnds-btn--primary" type="button">
  Primary button
</button>

<button class="wmnds-btn wmnds-btn--primary wmnds-is--active" type="button"> Primary active button </button>
<button class="wmnds-btn wmnds-btn--primary wmnds-btn--disabled" disabled="disabled" type="button"> Primary disabled button </button>
<button class="wmnds-btn wmnds-btn--primary" type="button"> Primary icon button <svg class="wmnds-btn__icon wmnds-btn__icon--right "> <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use> </svg> </button>
<button class="wmnds-btn wmnds-btn--primary wmnds-btn--disabled" disabled="disabled" type="button"> Primary icon disabled button <svg class="wmnds-btn__icon wmnds-btn__icon--right "> <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use> </svg> </button>

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

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


HTML markup
<button class="wmnds-btn wmnds-btn--secondary" type="button">
  Secondary button
</button>

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

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

Dark background variant



HTML markup
<button class="wmnds-btn wmnds-btn--secondary wmnds-btn--dark-bg" type="button">
  Secondary dark bg button
</button>

<button class="wmnds-btn wmnds-btn--secondary wmnds-is--active wmnds-btn--dark-bg" type="button"> Secondary dark bg active button </button>

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

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


HTML markup
<button class="wmnds-btn wmnds-btn--destructive" type="button">
  Destructive button
</button>

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

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

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


HTML markup
<button class="wmnds-btn wmnds-btn--start" type="button">
  Start button
</button>

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

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

Mode buttons

What does it do?

  • Lets the user select a mode of transport by which to filter

When to use it?

  • Filtering results or data by mode
  • Filtering a map by mode

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


HTML markup
<button class="wmnds-btn wmnds-btn--mode" type="button">
  <svg class="wmnds-btn__icon ">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  Bus
</button>

<button class="wmnds-btn wmnds-btn--mode wmnds-is--active" type="button"> <svg class="wmnds-btn__icon "> <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use> </svg> Bus active </button>
<button class="wmnds-btn wmnds-btn--mode" type="button"> <svg class="wmnds-btn__icon "> <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use> </svg> Train </button>
<button class="wmnds-btn wmnds-btn--mode" type="button"> <svg class="wmnds-btn__icon "> <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use> </svg> Metro </button>
<button class="wmnds-btn wmnds-btn--mode" type="button"> <svg class="wmnds-btn__icon "> <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use> </svg> Roads </button>
<button class="wmnds-btn wmnds-btn--mode wmnds-btn--disabled" disabled="disabled" type="button"> <svg class="wmnds-btn__icon "> <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use> </svg> Disabled mode button </button>

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

What does it do?

  • Behaves the same as a button, but uses the Link styling
  • Performs an action on the page instead of directing the user to an internal or external page
  • Uses the tag for accessibility

When to use it?

  • When a user needs to perform an action on a page
  • When there is limited space for a button

When not to use it?

  • The start of a process
  • When you want to direct the user to an internal or external page


HTML markup
<button class="wmnds-btn wmnds-btn--link" type="button">
  Button as link
</button>

Nunjucks markup
{% from "wmnds/components/button/_button.njk" import wmndsButton %}

{{
   wmndsButton({
      type: "secondary"
      contentText: "Button text",
      contentHTML: null,
      isActive: false,
      isDarkBg: false,
      isDisabled: false,
      isLoading: false,
      classes: "wmnds-m-t--lg",
      iconLeft: null,
      iconRight: "general-chevron-right",
      role: null
   })
}}

Nunjucks properties
NameTypeDescription
typestringType of the button. As default it is null. Available types: link, primary, secondary, destructive, start, mode
contentTextstringRequired. Specifies the content that will be part of the button. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content is going to be shown in the button.
isActivebooleanIt true, button will assume active state. Defaults to false.
isDarkBgbooleanIt true, button colours will adjust to work over a dark background. Defaults to false.
isDisabledbooleanIt true, button will assume disabled state. Defaults to false.
isLoadingbooleanIt true, button will assume a loading state and will show a spinner. Defaults to false.
classesstringList of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case.
iconLeftstringName of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page.
iconRightstringName of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page.
rolestringButton role by default is button. Other valid values are: submit and reset.

Accordion Buttons

What does it do?

  • Automatically opens or closes all accordions on the page

When to use it?

  • When 5 or more accordions are grouped together on a page

When not to use it?

  • When there are less than 4 accordions grouped together
  • For any components other than accordions


HTML markup
<button class="wmnds-btn wmnds-btn--primary" type="button">
  Open all
</button>

<button class="wmnds-btn wmnds-btn--primary wmnds-m-l-xs" type="button"> Close all </button>