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.

Last updated: 29 March 2022

<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'
}) }}

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.

How to use

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

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

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

{{ mojBadge({
  text: 'Complete',
  classes: 'moj-badge--green'
}) }}
<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 (Her Majesty’s Prison and Probation Service)
  • Professional case manager (Her Majesty’s Courts and Tribunals Service)