Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Navigation

Tag

Tags are used to classify content, typically using keywords.

Status

Supported

Introduced

v0.2.0

View codeView StorybookView Design

Interactive demo

This demo allows you to preview the tag component, its variations, and configuration options.

Tag Content
Disabled
Tag Size
Overrides
1import React from 'react';
2import { Tag } from 'newskit';
3
4export default () => (
5  <Tag href="https://www.newskit.co.uk/" size="medium">
6    Tag Content
7  </Tag>
8);
9

Anatomy

The tag contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The tag has options that can be used to provide an appropriate experience for different use cases.

Size

There are three sizes of tag: small, medium, and large.

Icons (leading & trailing)

Icons can be displayed in a tag and can be positioned either before (leading) or after (trailing) the label in the tag.

Label

Labels can be displayed in a tag. A label can give more context to what a tag indicates.

Size

There are three sizes of tag: small, medium, and large.

Icons (leading & trailing)

Icons can be displayed in a tag and can be positioned either before (leading) or after (trailing) the label in the tag.

Label

Labels can be displayed in a tag. A label can give more context to what a tag indicates.

States

The tag has the following states:

Base

The tag has a base state. This is the base style of the tag before it has been interacted with by a user.

Hover

The tag has a hover state. The style of the tag changes to visually communicate and provide feedback to the user that the tag is an interactive element.

Focus

The tag in a focus state communicates that a user has highlighted a tag, using an input method such as a keyboard or voice.

Active

The tag has an active state. The style of the tag changes to visually communicate and provide feedback to the user that the tag has been interacted with.

Behaviours

The following guidance describes how a tag behaves.

Fixed and full width

Tags can be displayed in two ways, but consideration should be made to how they will respond and react to containers around them:

Fixed width - size dependent on content (label, icons).

Full width - size responsive to the container it is applied to.

Fixed and full width

Tags can be displayed in two ways, but consideration should be made to how they will respond and react to containers around them:

Fixed width - size dependent on content (label, icons).

Full width - size responsive to the container it is applied to.

Usage

Here’s how and when to use tags:

Do make sure tags relate to the content

Tags should always have a direct relationship to the content they represent.

Don't make tags too wide

Avoid using full-width tags in wide containers. They are generally appropriate for small devices or contained components.

Do make sure tags have sufficient clearance

Do allow a sufficient hit area when placing two or more tags inline make sure they are a sufficient size or have spacing between them to avoid users accidentally hitting the wrong tag.

Don't have multiple words for labels

Avoid having multiple words for tag labels. They should be short and clear.

Accessibility considerations

The tag has the following accessibility considerations:

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

SEO

  • Tags are good for site navigation (for crawlers and users).

  • Ensure icons have alt text applied.

API

Tag

The tag has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?