Link

Overview

The Link component provides styled links for navigation within and outside the application. It offers two size options and distinguishes between internal and external links with appropriate visual indicator. The component ensures consistent styling while maintaining accessibility standards.

Installation

import { Link } from '@harnessio/ui/components'

// ...

return (
  <Link to="/your-url-here">Username</Link>
)

Usage

Anatomy

Link renders an anchor whose underlying element depends on whether it’s internal or external.

<Link to="/settings">Settings</Link>
<Link external href="https://harness.io">Harness</Link>

• Internal vs. external — the external prop is a discriminated union. By default (external unset/false) the component renders the app router’s link and takes a to prop. With external, it renders a plain <a> and takes an href plus any standard anchor attributes.
• Variants and size — variant (default / secondary) and size (md / sm) map to cn-link-* classes on the base cn-link element.
• Icons — prefixIcon and suffixIcon accept true or an icon name. When true, they render the defaults: nav-arrow-left (prefix) and arrow-up-right (suffix), both as an IconV2 at size 2xs. Pass a name to override.
• Disabled — disabled doesn’t change the element; it sets data-disabled / aria-disabled and intercepts clicks (calling preventDefault/stopPropagation so onClick never fires).
• Underline — noHoverUnderline opts out of the hover underline.

Best practices

Do

• Use an internal Link (to) for in-app navigation and external (href) for links that leave the app.
• Add a suffixIcon to external links so users can see the link leaves the current context.
• Keep link text descriptive of its destination — it doubles as the accessible name.

Don’t

• Don’t use a Link to trigger an action with no navigation; use a Button for that.
• Don’t write “click here” — the link text should make sense on its own.

Content

• Write link text that names the destination (“View pipeline settings”), not the mechanic (“click here”).
• Keep links short; if the surrounding sentence already explains the target, link just the key phrase.

Accessibility

Keyboard

• Links are focusable and activate with Enter, matching native anchor behavior.

Labeling

• The link’s text content is its accessible name — make it meaningful out of context. For an external link, consider indicating that it opens elsewhere.

Focus & states

• disabled sets aria-disabled and blocks activation, but the anchor remains in the DOM. Where a disabled link shouldn’t be reachable at all, also remove it from the tab order or render it as non-interactive text.

Known limitations

• External links don’t auto-set target/rel or add an external-link icon. Pass target/rel yourself when opening a new tab, and use suffixIcon to signal the link leaves the app.

Properties

Properties

Internal link

The default. Renders the app router link and accepts its props.

Prop	Required	Default	Type
to	true		string
external	false		false

External link

Set external to render a plain <a> and accept standard anchor attributes (target, rel, …).

Prop	Required	Default	Type
external	true		true
href	true		string

Common props

Shared by both variants.

Prop	Required	Default	Type
variant	false	'default'	'default' | 'secondary'
size	false	'md'	'md' | 'sm'
prefixIcon	false	'nav-arrow-left' (when true)	boolean | IconPropsV2['name']
suffixIcon	false	'arrow-up-right' (when true)	boolean | IconPropsV2['name']
disabled	false	false	boolean
noHoverUnderline	false	false	boolean
className	false		string