Version
has been released! Read the upgrade guide

Badge

The documentation on this page is considered legacy.

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

Badges are one of the foundational elements of any application.

Overview

A visual indicator useful for status information or meta data associated with an element.

1Usage

The Badge component is an indicator component that displays information to the user. It comes in two varieties - the default, rectangular Badge, and the Pill variation.

2Anatomy

  1. Label. Labels describe the Badge to the user. If text is not used, an icon should be used in its place.

  2. Container. The container element wraps the component.

3Sizing & Spacing

The Badge component is available in four sizes - small, regular, large and xLarge.

4States

The Badge component has five available states to use - Neutral, Primary, Success, Warning, and Danger. The badge component does not have any interaction, so there are no 'hover/active' states available.

5Hierarchy & Placement

Try to avoid mixing states and sizes, as this can become confusing for the user.

6Pill

The Pill Badge is a variation of the Badge component.

7Usage

The Pill Badge is used predominantly to act as a counter, displaying integer numbers (e.g. as a notification badge).

8States

The Pill Badge component is also available in 5 states - Neutral, Primary, Success, Warning, and Danger.

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