Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Status tag

Guidance Code Accessibility

Introduction

The status tag has four types:

  • Neutral

  • Success

  • Warning

  • Danger

Each status tag has a filled and outlined appearance option and is available in three sizes.

Interactive example

When to use

Display a status tag to show the status of an item in an application. For example, status tags could be used to show if a system is online or offline, if a document has been actioned or approved, or if a displayed train network is currently active or not.

Filled

Filled status tags use the status colours to denote the type of status tag.

Use filled status tags to convey emphasis and importance.

Outlined

Outlined status tags use a lighter colour variation of the relevant status colour.

Use outlined status tags to provide emphasis to less important items.

A good example of a success status tag labelled ‘approved’ used to show the status of a page titled ‘Guidance’.
Use status tags to convey the current status of something.

When not to use

Don't use status tags to display anything other than status, use static chips .

An example of a status tag being used to display the author of a page.
Don't use status tags for anything other than denoting status.

Don't use a mix of filled and outlined status tags when using them together.

An incorrect example of filled and outlined status tags being used in the same page section.
Don't use a mix of filled and outlined status tags to show the same status messages within a group of items.

Layout and placement

When components are used together the size of the components should match. For example, a medium sized status tag should be used with a default sized input component.

A good example of medium sized status tags being used in the same section as other medium sized components, and a small status tag being used in the same section as another small component.
Use the correct status tag size to match other UI component sizes.
An incorrect example of small sized status tags used in the same section as other medium sized components, and a medium status tag being used in the same section as a small component.
Don't mix sizes when using multiple UI components.

Content

Labels

Use adjectives in the status tag label over verbs. Verbs may indicate to a user that by clicking on them the tag will be interactive.

Text in tags should be all capitals to increase readability.

A correct example of a status tag which has the label 'submitted'.
Use adjectives to describe status.
An incorrect example of a status tag which has the label 'submit'.
Don't use verbs in status tags.

Use the right status tag type that is relevant to the label. Don't use labels that convey different information to what the status colour conveys.

A correct example of status tag labelling. The default variant has the label 'incomplete', the success variant has the label 'accepted’, the warning variant has the label 'in review', the danger variant has the label 'rejected'.
Use relevant wording that supports the status tag colour.
An incorrect example of status tag labelling. The default variant has the label 'urgent', the success variant has the label 'error’, the warning variant has the label 'success', the danger variant has the label 'approved'.
Don't use wording that directly contradicts or doesn’t support the status of the tag.

Use concise labels for better readability. Longer labels will force the text to wrap.

An example of a long label being wrapped on two lines. Avoid using long labels as it will force the text to wrap.
Last reviewed 17 April 2023 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Status tag - Intelligence Community Design System