Tag

Overview

The tag element is used as a way of classifying content, typically using keywords. They are added to a web page or other content to help users search for and find related content quickly and easily.

Usage

A tag can be used on it's own or in a stack and displayed anywhere that a quick link to related content could be beneficial to a user e.g. article pages or search.

Props

Tags have a number of props to facilitate a variety of uses:

childrenstring

The content of the Tag is passed as the child of the component.

hrefstring

If provided, the Tag will render as an anchor with this prop value as the href.

sizeTagSize = Medium

Optional size of the Tag: Small, Medium or Large.

disabledboolean = false

If true, the Tag will render the disabled state of the style preset. If an href is also passed, the Tag will not open the provided href on click.

loadingboolean = false

If true, this will cause the Tag to render the loading state of the style preset.

overridesobject

If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Tag accepts:

spaceInsetMQ<string>

If provided, this overrides the padding of the Tag. Otherwise, spaceInsetSquish010 or spaceInsetSquish020 is used depending on the `size` prop.

stylePresetMQ<string>

If provided, this overrides the style preset applied to the Tag.

transitionPresetTransitionToken | TransitionToken[]

If provided, this overrides the transition preset applied to the Tag.

typographyPresetMQ<string>

If provided, this overrides the typography preset applied to the Tag. Otherwise, utilityLabel010, utilityLabel020 or utilityLabel030 is used depending on the `size` prop.

spaceInlineMQ<string>

If provided, this overrides the space between multiple children in the underlying Stack. If less than 2 children are passed, this prop is irrelevant.

iconSizeMQ<string>

If provided, this overrides the icon size of any child icons. If no icons are present in the Tag's children then this prop is irrelevant.

Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.

widthMQ<string>

If provided, this sets a fixed width to the Tag. This can be a sizing token from the theme, or any CSS length value, e.g. 100% for a full-width element.

heightMQ<string>

If provided, this sets a fixed height to the Tag. This can be a sizing token from the theme, or any CSS length value.

minHeightMQ<string>

If provided, this sets a minimum height to the Tag. This can be a sizing token from the theme, or any CSS length value. By default, sizing050, sizing060 or sizing070 is used depending on the `size` prop.

maxHeightMQ<string>

If provided, this sets a maximum height to the Tag. This can be a sizing token from the theme, or any CSS length value.

maxWidthMQ<string>

If provided, this sets a maximum width to the Tag. This can be a sizing token from the theme, or any CSS length value.

paddingInlineMQ<string>

It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.

paddingInlineStartMQ<string>

It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.

paddingInlineEndMQ<string>

It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.

paddingBlockMQ<string>

It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.

paddingBlockStartMQ<string>

It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.

paddingBlockEndMQ<string>

It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.

marginInlineMQ<string>

It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.

marginInlineStartMQ<string>

It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.

marginInlineEndMQ<string>

It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.

marginBlockMQ<string>

It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.

marginBlockStartMQ<string>

It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.

marginBlockEndMQ<string>

It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.

Refer to the defaults below for the object structure:

An error occurred loading this code example.

Playground

Tag Content

1import React from 'react';
2import { Tag } from 'newskit';
3
4export default () => (
5  <Tag
6    href="http://example.com"
7    size="medium"
8    overrides={{}}
9  >
10    Tag Content
11  </Tag>
12);
13

For more information on overriding component defaults, see the docs here.

Variations

NewsKit provides two types of predefined style preset tags variants.

Types

StylePreset	Tag
tagPrimary	Text

Inverse presets

StylePreset	Tag
tagPrimaryInverse	Text

Rationale

Styling

Tags are designed to be compact and discreet as they are intended to supplement the primary content.

Tags should have as few words as possible and always have a direct relationship to the content they represent.

Accessibility

Colour

Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.

SEO

Ranking

Tagging generates hub pages which act as valuable catch-all pages, these rank well in search, are automatically updated and generate more backlinks.

Navigation

Good for site navigation (for crawlers and users), particularly helpful where site structure is poor (The Times)

Descriptive

Tagging helps tell Google what the page content is about, this then enables Google to better surface those pages in search