has been released! Read the upgrade guide


The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Buttons are one of the foundational elements of any application.


The Button Component gives users a way to take action in an interface. They are placed throughout User Interfaces (UIs) and often serve as the main action in a component.


The usage section is a bullet pointed list of scenarios the component should be used in.

Buttons are available in three variants - Primary, Secondary and Tertiary. These variants allow designers to establish hierarchy in interfaces.


  1. Container. This element wraps the component.

  2. Label. A label describes the button action to the user. If text is not used, an icon should be used in its place.

  3. Icon (optional). The button component can have icons placed either to the left or right of the label. No more than one icon should be used per button.

3Sizing & Spacing

The Button component comes in four sizes - small, regular, large, and xLarge. By default, you should use the regular button - this has been designed to fit the majority of UI use cases.

For forms, the Large button has been created so it sits at the same height as the textInput component. The small and xLarge buttons are available for specific use cases where the primary/large buttons are unsuitable.

4Hierarchy & Placement

Creating visual hierarchy in your UI is important as it helps the user to understand the main actions of your page. The Primary, Secondary, and Tertiary buttons have different application use cases, so be sure to read the following sections to understand when to use these variations.

5Primary Button


The Primary Button is responsible for the most important action of a particular page.


Like all variations of the Button component, the Primary Button has three states - defaulthover, and focus.

Hierarchy & Placement

Avoid using multiple Primary Buttons in the same block of user interface (UI). This can make the main action unclear and confuse users. If you need multiple actions, decide which action is the most important one and make this your Primary Button. All other actions should use Secondary or Tertiary Buttons.

6Secondary Button


The Secondary Button is a supportive action for a Primary Button. They are not the main action of a section of UI. Their role is to offer users additional actions.


Hierarchy & Placement

You can use multiple Secondary Buttons in the same section of UI. Their unobtrusive nature means they are unlikely to be the main focus for users. However, they are still present enough for the user to interact with them.

7Tertiary Button

The Tertiary Button is a text styled button that has no border or background.


Tertiary Buttons are unobtrusive actions that should support Primary or Secondary Buttons. They should not be the main focus of the UI, but should still be easily discoverable by the user. They are best suited to things like Cancel buttons, where the goal is to allow the user to exit a Primary or Secondary action decision.


Like all other buttons, Tertiary Buttons have three main interactive states:

Hierarchy & Placement

Avoid using multiple Tertiary Buttons next to each other. Their supportive role is best used to undo a Primary or Secondary action.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright