Components Badge

Use the badge to highlight small details. For example whether something is urgent or reserved.

<span class="hmcts-badge">Recently added</span> 
{% from "hmcts-badge/macro.njk" import hmctsBadge %}

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

You may be able to configure this component using the Nunjucks macro arguments

When to use this component

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 it works

The default, neutral badge is blue. Badges can also be styled in green and red.

<span class="hmcts-badge hmcts-badge--green">Reserved to you</span> 
{% from "hmcts-badge/macro.njk" import hmctsBadge %}

{{ hmctsBadge({
text: 'Reserved to you',
classes: 'hmcts-badge--green'
}) }} 

You may be able to configure this component using the Nunjucks macro arguments

<span class="hmcts-badge hmcts-badge--red">Urgent</span> 
{% from "hmcts-badge/macro.njk" import hmctsBadge %}

{{ hmctsBadge({
text: 'Urgent',
classes: 'hmcts-badge--red'
}) }} 

You may be able to configure this component using the Nunjucks macro arguments

Research on this component

This component has been used successfully in JUI and PUI.

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system channel on Slack or email the Design System team on design-sytem@hmcts.net