Components Badge

Important

The GOV.UK Design System has a similar component

The Tag component in the GOV.UK Design System has a similar function and visual design to this component.

You should consider using the GOV.UK version if it fits your needs.

Open this example in a new window

<span class="moj-badge">Recently added</span>

Nunjucks macro options

Name	Type	Required	Description
text	string	Yes	If html is set, this is not required. Text to use within the span. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the span. If html is provided, the text argument will be ignored.
classes	string	Yes	Classes to add to the span container. See available classes.
label	string	No	The aria-label to add to the span container.
attributes	object	No	HTML attributes (for example data attributes) to add to the span container.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.

{%- from "moj/components/badge/macro.njk" import mojBadge -%}

{{ mojBadge({
  text: 'Recently added'
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

When to use

Use the badge component to highlight small details like an urgent case.

The badge is useful for drawing users attention to particular information. It should be used sparingly because when used a lot it loses its value.

In HMPPS digital services, you should only use the badge to show risk information.

How to use

The default, neutral badge is blue. Alternative styles are also available, for example, green and red.

Open this example in a new window

<span class="moj-badge moj-badge--green">Complete</span>

{%- from "moj/components/badge/macro.njk" import mojBadge -%}

{{ mojBadge({
  text: 'Complete',
  classes: 'moj-badge--green'
}) }}

Open this example in a new window

<span class="moj-badge moj-badge--red">Urgent</span>

{%- from "moj/components/badge/macro.njk" import mojBadge -%}

{{ mojBadge({
  text: 'Urgent',
  classes: 'moj-badge--red'
}) }}

Additional styles

There are a number of additional colour styles that can be used:

Class name	badge
moj-badge--purple	Lorem ipsum 1
moj-badge--bright-purple	Lorem ipsum 2
moj-badge--red	Lorem ipsum 3
moj-badge--green	Lorem ipsum 4
moj-badge--blue	Lorem ipsum 5
moj-badge--black	Lorem ipsum 6
moj-badge--grey	Lorem ipsum 7

With a size modifier

Class names	badge
moj-badge--purple moj-badge--large	Lorem ipsum 1
moj-badge--bright-purple moj-badge--large	Lorem ipsum 2
moj-badge--red moj-badge--large	Lorem ipsum 3
moj-badge--green moj-badge--large	Lorem ipsum 4
moj-badge--blue moj-badge--large	Lorem ipsum 5
moj-badge--black moj-badge--large	Lorem ipsum 6
moj-badge--grey moj-badge--large	Lorem ipsum 7

Research

This component has been used successfully in the following services:

• Claim fees for Crown court defence (Legal Aid Agency)
• Prisoner Escort Request (His Majesty’s Prison and Probation Service)
• Professional case manager (His Majesty’s Courts and Tribunals Service)

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

• how you have used this component in your service
• any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the badge discussion on Github.