Status badges

Status badges draw attention to important content, such as new or updated items. Their bright colour system gives users cues that are recognisable across different pages or platforms.

Best practice

Corresponding elements

A badge should be clearly attached to just one other element, making it clear what the badge's message applies to.

Limit text

A badge can contain up to 30 characters within its maximum width of 200 pixels. Longer text will not truncate.

Use tags to categorise

Don't use badges to label categories – this is the role of tags.