Skip to main content
In progress

Link

A styled anchor element that provides consistent link styling and optionally displays an external link icon next to the link text.

Link text
Code example
import { Link } from '@yleisradio/yds-components-react';

<Link href="#">Link text</Link>

Why to Use​

Link ensures consistent anchor styling across Yle services without repeating style definitions. The built-in external link icon provides a standard visual affordance when linking to outside destinations, removing the need to implement it per-service.

When to Use​

Use Link for navigational anchor elements that take users to a new location within the same app or to an external URL.

Do
  • Use for inline text links within body copy or lists.
  • Use for navigation links in headers, footers, and menus.
  • Use isExternal when the link navigates to a URL outside the current application.
Don't
  • Don't use Link to trigger actions — use Button instead.
  • Don't use Link for category or keyword labels — use TagLink instead.

Writing Guidelines​

Link text must clearly describe the destination so users can predict where the link leads without reading surrounding content.

Do
  • Use descriptive text that makes sense out of context (e.g. "Read the accessibility report").
  • Keep link text concise, ideally 2–5 words.
Don't
  • Don't use generic text like "click here", "read more", or "link".
  • Don't repeat the full URL as link text for external links.

Use these props to configure the Link component.

isExternal​

When true, renders an ExternalLink icon alongside the link text to signal that the destination is outside the current application. Defaults to false.

TypeExampleDescription
booleanYle.fiDisplays an external link icon next to the text.
Code example
<Link href="https://yle.fi" isExternal>Yle.fi</Link>

externalLinkIconPosition​

Controls whether the external link icon appears before or after the link text. Only relevant when isExternal is true. Defaults to 'after'.

ValueExampleDescription
'after'Yle.fiIcon placed after the text.
'before'Yle.fiIcon placed before the text.
Code example
<Link href="https://yle.fi" isExternal externalLinkIconPosition="after">Yle.fi</Link>
<Link href="https://yle.fi" isExternal externalLinkIconPosition="before">Yle.fi</Link>

Behavior​

  • Renders a standard HTML <a> element; all native anchor attributes (href, target, rel, etc.) are forwarded.
  • When isExternal is true and externalLinkIconPosition is 'after' (default), the icon is rendered after the children.
  • When isExternal is true and externalLinkIconPosition is 'before', the icon is rendered before the children.
  • The external link icon is decorative and wrapped in a non-interactive span.

Accessibility​

  • Link text must be descriptive enough to convey the destination without relying on surrounding context.
    (WCAG 2.4.6 — Headings and Labels)
  • When linking to an external site, consider adding rel="noopener noreferrer" and informing users via link text or a visually hidden label that the link opens externally.
    (WCAG 2.4.4 — Link Purpose)
  • The ExternalLink icon is decorative; ensure the link text alone communicates the destination.

API Reference​

Props​

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

PropTypeRequiredDefaultDescription
isExternalbooleanNofalseDisplays an external link icon next to the text.
externalLinkIconPosition'after' | 'before'No'after'Position of the external link icon relative to the text.
childrenReact.ReactNodeNo—Content of the link.

Type Definitions​

export interface LinkDSProps {
  isExternal?: boolean;
  externalLinkIconPosition?: 'after' | 'before';
  children?: React.ReactNode;
}

export type LinkProps = LinkDSProps & AnchorHTMLAttributes<HTMLAnchorElement>;
  • TagLink – An interactive keyword link for navigational context on articles or content items.
  • Button – For triggering actions rather than navigation.