Design

Research and rationale

Classifying tags

There is often some confusion around how the tag component is named and what function it serves. Through different Design Systems, components such as labels, tags, chips and badges all help to categorise elements but often have different design approaches and styles. For clarity in our Design System, it was important to work out what the correct purpose of tags should be for based on best practice and what style and function they should adopt.

W3C’s article helped provided advice specifically on this this topic, presenting the following 2 resolutions which we used to inform our choices:

For our Design System we reference to tags, pills, badges and chips in the following ways:

Tags: Tags are usually used for categorisation and metadata. They're often simple, with a text label, and sometimes not interactive.

Pills: Pills are stylised tags but usually have rounded edges. They're often used for labels, status, or filters, and can sometimes be interactive.

Chips (Material Design term): Chips are versatile and can be used for input, selection, filters, or complex entities (such as contacts). They're more likely to be interactive and can contain an icon, a label, and a 'close' button.

Badges: Badges usually contain numbers or icons and are used to indicate a status, notification count, or a small piece of information attached to an item.

Our tag types

After defining exactly what tags were we chose to break up the tag component into 4 varieties: default tags, action tags, information tags, and applied filter tags.

We chose to categorise our tags for the following reasons:

• clarity and Purpose: by clearly defining the types of tags, we ensure that each type of tag has a specific purpose and usage scenario. This reduces confusion and improves the consistency of the design
• versatility: our tags cover a broad spectrum of use cases from categorisation, interactivity, displaying metadata, to filtering - similar to what might be accomplished using a mix of tags, pills, and chips
• simplicity: by using the term "Tags" and categorising them based on their purpose, we avoid the confusion that might arise from using different terms like pills, badges, labels and chips. This simplicity makes it easier for designers and developers to understand and use the components effectively
• we avoid using the words label and chips: label is terminology that is already specific to forms so we wanted to avoid using this, chips also seemed to be specific to material design and we felt that its inclusion may add confusion
• future state: we have specifically tried to avoid using tags to convey information that would be more suited for badges as we see that as a separate and unique component to be designed in the future.

Style and design

Our initial tag design is based on the Digital Transformation Agency's tag component. However, we opted to used extremely rounded borders with our tags to create more visual distinctiveness and separate them further from standard links and buttons. This shape when associated with tags is often referred to as a pill or chip. The shape is more suited to our tag design as pills and chips are commonly associated with some of the other functionality our tags offer such as being links or applied filters.

To further differentiate tags from primary or secondary buttons we also ensured our tags had a different border thickness, radius, and padding.

Sizes

For our tags we added an additional large style variation. This gives designers the option to use different sizes to tags which is important when maintaining visual harmony with the other content on the screen or when you need to create a comfortable touch target for interactive tags. The large style tag also allows important metadata to stand out more within content.

Supplementary/Information tags

During the design of our search component, we realised that we were consistently using tags to convey 2 distinct forms of content. In the body of the search result we were listing all the related metadata which were often topical, however in the top right we were listing secondary information such as file size, read time and distance. This secondary information was always data based.

Because these 2 tags were positioned closely but convey different types of content, we wanted a way for users to easily be able to differentiate the content which would assist them when scanning the page. We opted to create a unique style for these secondary data tags, this style is labelled as supplementary or information tags.  

These tags are similar but not the same as badges. Badges usually contain numbers or icons and are used to indicate a status, notification count, or a very small piece of information attached to an item. Information tags don't sit within the component, have longer content and unique information.