Newskit Logo

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

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.

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.

Refer to the defaults below for the object structure:

1{
2  small: {
3    typographyPreset: "utilityButton010",
4    stylePreset: "tagPrimary",
5    spaceInset: "spaceInsetSquish010",
6    minHeight: "sizing050",
7    iconSize: "iconSize010",
8    spaceInline: "space010"
9  },
10  medium: {
11    typographyPreset: "utilityButton020",
12    stylePreset: "tagPrimary",
13    spaceInset: "spaceInsetSquish020",
14    minHeight: "sizing060",
15    iconSize: "iconSize010",
16    spaceInline: "space010"
17  },
18  large: {
19    typographyPreset: "utilityButton030",
20    stylePreset: "tagPrimary",
21    spaceInset: "spaceInsetSquish020",
22    minHeight: "sizing070",
23    iconSize: "iconSize020",
24    spaceInline: "space010"
25  }
26}

Playground

Variations

Types

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

Tag

Overview