In progress

TagLink

An interactive keyword link that provides navigational context for an article or content item.

• Figma
• Storybook
• Edit this page
• Create a new issue

Strömsö

Code example

import { TagLink } from '@yleisradio/yds-components-react';

<TagLink href="#" variant="primary">Strömsö</TagLink>

Why to Use

TagLink helps users explore related topics, brands, and campaigns, and builds contextual connections between Yle’s articles and services. It is typically displayed beside the headline or as a group at the end of an article, allowing quick navigation and discovery.

When to Use

Use TagLink whenever you need a clickable keyword or topical label that navigates to a related page (topic, campaign, brand, or trending theme).

Do

• Use beside an article headline to highlight its main keyword (topic, brand, or special theme).
• Use grouped at the end of an article to display related keyword links.
• Keep link text short (1–2 words) to avoid truncation and wrapping.
• Place TagLinks close to related content to clarify their context.
• Use aria-label if the visible text alone isn’t descriptive enough.

Don’t

• Don’t use TagLink for actions — use Button instead.
• Don’t include icons or images inside TagLinks.
• Don’t allow TagLinks to wrap to multiple lines; keep content concise.
• Don’t use for non-interactive tags — use Tag instead.

Key Props

Use the following props to customize the TagLink component to fit your needs.

variant

Controls the visual semantic meaning (background & text color). Pick the variant that matches the context or classification.

Value	Example	Typical usage
primary	Strömsö	Highlighted topical or editorial category; used beside headlines for campaigns, brands, or trending topics (e.g. Strömsö, MOT, Nenäpäivä).
secondary	Culture	Used at the end of an article for related keyword link groups (e.g. Culture, Nature).
text	Nature	Inline keyword link beside a headline; lightweight visual style for subtle emphasis.

Code example

<TagLink href="#" variant="primary">Strömsö</TagLink>
<TagLink href="#" variant="secondary">Culture</TagLink>
<TagLink href="#" variant="text">Nature</TagLink>

removePadding

Removes the internal horizontal & vertical padding when used with the text variant for tight inline placement near headings. Ignored for other variants (they keep their pill shape). To keep alignment with other rows, place to the beginning of a row of text.

Type	Example	Description
boolean	Topic	Eliminates padding for inline text variant.

Code example

<TagLink href="#" variant="text">Topic</TagLink>
<TagLink href="#" variant="text" removePadding>Topic</TagLink>

Non-Interactive Fallback

If you omit both href and onClick, TagLink renders a visually styled <span> (TagLinkBaseNonInteractive). Prefer using the separate Tag component for semantic non-interactive labels, but this fallback supports layout scenarios where a link may conditionally exist.

// Renders as <span>
<TagLink variant="primary">Conditional Label</TagLink>

// Renders as <a>
<TagLink href="#" variant="primary">Strömsö</TagLink>

See more examples in Storybook

Accessibility

TagLinks behave like standard hyperlinks:

• Use aria-label if the visible keyword needs additional context.
• Keep text concise to minimize cognitive load.
• Avoid setting numberOfLines > 1 unless truncation is required for extremely long keyword phrases.

API Reference

Props

The TagLink component accepts all standard HTML <a> attributes in addition to the following props:

Prop	Type	Required	Default	Description
variant	TagLinkVariant	No	'primary'
children	React.ReactNode	No	—
removePadding	boolean	No	false
numberOfLines	number	No	1

Type Definitions

export type TagLinkVariant = 'primary' | 'secondary' | 'text';

export interface TagLinkDSProps {
  variant?: TagLinkVariant;
  children?: React.ReactNode;
  removePadding?: boolean;
  numberOfLines?: number;
}

export type TagLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & TagLinkDSProps;

Related Components

• Tag: Non-interactive keyword or status label.
• TagFilter: Used to indicate selected filters and allow removal (typically in groups).
• Badge: Displays notifications, counts, or related numeric indicators.