Version
has been released! Read the upgrade guide

Button Group

The documentation on this page is considered legacy.

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

A collection of buttons commonly used to select an option

Overview

A Button group is a useful component for grouping together buttons to allow a user to select an option.

1Usage

The Button Group acts as a wrapper for multiple buttons. It removes the spacing and border radius between adjacent buttons, making them sit flush next to each other. It is used to indicate a relationship between similar actions - pagination and toolbars are great examples of this.

2Anatomy

The Button Group by itself doesn't have any visual elements. The Group simply removes the spacing between buttons and makes them sit flush beside each other.

  1. Container - wraps the component and removes border-radius and spacing between buttons.

  2. Buttons - the Button Components added to the Group.

3Sizing & Spacing

The Button Group should always use the same size Button components. This allows the buttons to be positioned flush against each other. The Buttons themselves though can be any of the available sizes outlined on the Button Docs page.

4Hierarchy & Placement

The Button Group is used to collate similar actions together under one consistent grouping. It should only feature Secondary Buttons, as Primary Buttons should be standalone actions.

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