Newskit Logo

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.
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.
iconSizestring
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.
widthstring
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.
heightstring
If provided, this sets a fixed height to the Tag. This can be a sizing token from the theme, or any CSS length value.
minHeightstring
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.
Refer to the defaults below for the object structure:
{
  small: {
    typographyPreset: "utilityLabel010",
    stylePreset: "tagDefault",
    spaceInset: "spaceInsetSquish010",
    minHeight: "sizing050",
    iconSize: "iconSize010",
    spaceInline: "space010"
  },
  medium: {
    typographyPreset: "utilityLabel020",
    stylePreset: "tagDefault",
    spaceInset: "spaceInsetSquish020",
    minHeight: "sizing060",
    iconSize: "iconSize010",
    spaceInline: "space010"
  },
  large: {
    typographyPreset: "utilityLabel030",
    stylePreset: "tagDefault",
    spaceInset: "spaceInsetSquish020",
    minHeight: "sizing070",
    iconSize: "iconSize020",
    spaceInline: "space010"
  }
}

Playground

Tag Content
Disabled
Tag Size
Style Preset
Typography Preset
import React from 'react';
import { Tag } from 'newskit';

export default () => (
  <Tag
    href="http://example.com"
    size="medium"
    overrides={{}}
  >
    Tag Content
  </Tag>
);

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

Variations

NewsKit provides two types of predefined style preset tags variants.

Types

StylePresetTag
tagPrimary
Text

Inverse presets

StylePresetTag
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