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.

Button Alignment

The quickest option for button alignment is to use the text alignment utility classes .wmnds-text-align-left, .wmnds-text-align-center and .wmnds-text-align-right. You may need to consider custom styles for more specific use cases.

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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button role by default is `button`. Other valid values are: `submit` and `reset`.

Pay with Swift buttons

What does it do?

Enables users to pay for West Midlands Cycle Hire using Swift

When to use it?

When a ticket or fare can be purchased using Swift in a travel operator app

When not to use it?

When buying a ticket on the Transport for West Midlands website

HTML markup

<button class="wmnds-btn wmnds-btn--primary" type="button">
  Pay with <svg class="wmnds-swift-logo-inline">
    <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
  </svg>
</button>

<button class="wmnds-btn wmnds-btn--primary wmnds-is--active" type="button">
  Pay with <svg class="wmnds-swift-logo-inline">
    <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
  </svg> (active)
</button>

<button class="wmnds-btn wmnds-btn--primary wmnds-btn--disabled" disabled="disabled" type="button">
  Pay with <svg class="wmnds-swift-logo-inline">
    <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
  </svg> (disabled)
</button>

<button class="wmnds-btn wmnds-btn--primary" type="button">
  Pay with <svg class="wmnds-swift-logo-inline">
    <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
  </svg>
  <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">
  Pay with <svg class="wmnds-swift-logo-inline">
    <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
  </svg> (disabled)
  <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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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 wmnds-btn__icon--left ">
    <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 wmnds-btn__icon--left ">
    <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 wmnds-btn__icon--left ">
    <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 wmnds-btn__icon--left ">
    <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 wmnds-btn__icon--left ">
    <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 wmnds-btn__icon--left ">
    <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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button role by default is `button`. Other valid values are: `submit` and `reset`.

Button as Link

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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button role by default is `button`. Other valid values are: `submit` and `reset`.

Add to homepage

What does it do?

Allows users to add transport services to the Live departures widget and the Travel updates widget on the homepage from the timetable and disruption services
Users can remove the services they have favourited

When to use it?

When a user can add a transport service or route to a personalised widget on the homepage

HTML markup

<button class="wmnds-btn wmnds-btn--favourite" type="button">
  <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
    <use xlink:href="#wmnds-general-star-empty" href="#wmnds-general-star-empty"></use>
  </svg>
  Add to homepage
</button>

<button class="wmnds-btn wmnds-btn--favourite" type="button">
  <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
    <use xlink:href="#wmnds-general-star" href="#wmnds-general-star"></use>
  </svg>
  Remove from homepage
</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

Name	Type	Description
type	string	Type of the button. As default it is `null`. Available types: `link`, `primary`, `secondary`, `destructive`, `start`, `mode`, `favourite`
contentText	string	Required. Specifies the content that will be part of the button. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. Uses HTML to specifies what content is going to be shown in the button.
isActive	boolean	It true, button will assume active state. Defaults to `false`.
isDarkBg	boolean	It true, button colours will adjust to work over a dark background. Defaults to `false`.
isDisabled	boolean	It true, button will assume disabled state. Defaults to `false`.
isLoading	boolean	It true, button will assume a loading state and will show a spinner. Defaults to `false`.
classes	string	List 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.
iconLeft	string	Name 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.
iconRight	string	Name 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.
role	string	Button 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>

General

Form elements

Buttons

About

Button Size

Button Alignment

Call to action buttons

What does it do?

When to use it?

When not to use it?

Dark background variant

Primary buttons

What does it do?

When to use it?

When not to use it?

Pay with Swift buttons

What does it do?

When to use it?

When not to use it?

Secondary buttons

What does it do?

When to use it?

When not to use it?

Dark background variant

Destructive buttons

What does it do?

When to use it?

When not to use it?

Start buttons

What does it do?

When to use it?

When not to use it?

Mode buttons

What does it do?

When to use it?

When not to use it?

Button as Link

What does it do?

When to use it?

When not to use it?

Add to homepage

What does it do?

When to use it?

Accordion Buttons

What does it do?

When to use it?

When not to use it?