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 provides a lightweight, scannable way to connect content to related topics, brands, campaigns, or themes. It supports content discovery by helping users explore related material without interrupting their reading flow. TagLinks are commonly used near headlines or at the end of articles to surface contextual navigation.

When to Use

Use TagLink when you need a clickable keyword or label that navigates the user to a related page or collection.

Do

• Use when a keyword should lead to a topic, brand, campaign, or themed collection.
• Use beside article headlines to highlight the primary topic or brand.
• Use at the end of articles to link to related topics.
• Use when navigation is the primary purpose of the label.

Don’t

• Don’t use TagLink for triggering actions — use Button instead.
• Don’t use TagLink for purely informational labels — use Tag instead.
• Don’t use when the destination is unclear or ambiguous.

Content Guidelines

TagLink labels must be short, clear, and meaningful on their own. Users should immediately understand what kind of content they will navigate to.

Do

• Keep text short and scannable (ideally 1–2 words).
• Use proper nouns or established topic names (e.g. Strömsö, Culture, Nature).
• Place TagLinks close to the content they describe.
• Use consistent terminology across similar content.

Don’t

• Don’t use long phrases or explanatory text.
• Don’t include icons or images inside TagLinks.
• Don’t allow TagLinks to wrap to multiple lines unnecessarily.
• Don’t rely on visual styling alone to explain meaning.

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

Behavior

• TagLink behaves like a standard link.
• Activating a TagLink navigates the user to a related page or view.
• Variants affect visual emphasis, not behavior.
• When href or onClick is missing, TagLink renders as a non-interactive span for layout fallback.
• Padding can be removed in text variant for tight inline alignment near headings.

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.