NICE Design System home

Tag

Tags provide a visual way to identify, label or highlight an item.

I am a tag! I am also a tag!

Tags provide a visual way to identify, label or highlight an item. For example, to highlight a new or updated piece of guidance with a list. They may also be removeable, for example when showing applied filters above a filtered list.

When to use

Tags should be used for categorical information, such as publication status when there are few different categories.

Use removeable tags when users need to be able to remove or dismiss a tag. Use with outline tags at the top of filtered lists to show the currently applied selections.

When not to use

Tag content should not be long than 2 to 3 words. Use impact tags sparingly, e.g. within phase banners.

How to use

Use within a card component or alpha/beta banner component, or within a list to label items.

Variants

Standard

Tag
React
HTML

_10
<Tag>Tag</Tag>

Phase

See also phase banners.

Alpha Beta Live
React
HTML

_10
<>
_10
<Tag alpha>Alpha</Tag> <Tag beta>Beta</Tag> <Tag live>Live</Tag>
_10
</>

Guidance

Use tags to denote the status of guidance in lists etc. Usually used within a card component.

New Updated Consultation
React
HTML

_10
<>
_10
<Tag new>New</Tag> <Tag updated>Updated</Tag>{" "}
_10
<Tag consultation>Consultation</Tag>
_10
</>

Impact

Use impact tags sparingly, e.g. within phase banners.

Tag
React
HTML

_10
<Tag impact>Tag</Tag>

Flush

Tags have a small margin by default. Use the flush variant to remove the margin:

Tag
React
HTML

_10
<Tag flush>Tag</Tag>

Outline

Use the outline variant for a tag with a border. Use outline tags with filtered lists to show the currently applied filters.

Tag
React
HTML

_10
<Tag outline>Tag</Tag>

Accessibility

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research/evidence

Research on button styling highlighted the need for tag styling to be clearly distinct from button styles so that users do not expect tags to be clickable elements.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.