Link - Kumo

Default inline link Current color link Plain inline link

import { Link } from "@cloudflare/kumo";

export function LinkBasicDemo() {
  return (
    <div className="grid gap-x-6 gap-y-4 text-base md:grid-cols-3">
      <Link href="#">Default inline link</Link>
      <Link href="#" variant="current">
        Current color link
      </Link>
      <Link href="#" variant="plain">
        Plain inline link
      </Link>
    </div>
  );
}

Installation

Barrel

import { Link } from "@cloudflare/kumo";

Granular

import { Link } from "@cloudflare/kumo/components/link";

Usage

Basic Link

The default Link component renders an underlined anchor with primary color styling.

import { Link } from "@cloudflare/kumo";

export default function Example() {
  return (
    <p>
      Read our <Link href="/docs">documentation</Link> for more details.
    </p>
  );
}

External Links

Use the Link.ExternalIcon subcomponent to indicate links that open in a new tab.

import { Link } from "@cloudflare/kumo";

export default function Example() {
  return (
    <Link
      href="https://cloudflare.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      Visit Cloudflare <Link.ExternalIcon />
    </Link>
  );
}

Framework Integration (render prop)

Use the render prop to compose Link styles onto framework-specific routing components like React Router’s Link or Next.js Link.

import { Link } from "@cloudflare/kumo";
import { Link as RouterLink } from "react-router-dom";

export default function Example() {
  return (
    <Link render={<RouterLink to="/dashboard" />} variant="inline">
      Dashboard
    </Link>
  );
}

Examples

Inline in Paragraph

Links flow naturally within paragraph text with proper underline offset.

This is a paragraph with an inline link that flows naturally with the surrounding text. Links maintain proper underline offset for readability.

import { Link } from "@cloudflare/kumo";

export function LinkInParagraphDemo() {
  return (
    <p className="mx-auto max-w-md text-base leading-relaxed text-kumo-default">
      This is a paragraph with an <Link href="#">inline link</Link> that flows
      naturally with the surrounding text. Links maintain proper underline
      offset for readability.
    </p>
  );
}

External Link with Icon

Use Link.ExternalIcon to visually indicate links that navigate away from your site.

Visit Cloudflare

import { Link } from "@cloudflare/kumo";

export function LinkExternalDemo() {
  return (
    <Link
      href="https://cloudflare.com"
      target="_blank"
      rel="noopener noreferrer"
      className="text-base"
    >
      Visit Cloudflare <Link.ExternalIcon />
    </Link>
  );
}

Current Variant (Color Inheritance)

The current variant inherits color from its parent, useful for links within colored contexts like alerts.

This error message contains a link that inherits the red color from its parent.

import { Link } from "@cloudflare/kumo";

export function LinkCurrentVariantDemo() {
  return (
    <p className="text-base text-kumo-danger">
      This error message contains a{" "}
      <Link href="#" variant="current">
        link
      </Link>{" "}
      that inherits the red color from its parent.
    </p>
  );
}

Composition with render prop

The render prop lets you compose Link styling onto any element, enabling integration with framework routing components.

Dashboard (via render)Cloudflare Docs

import { Link } from "@cloudflare/kumo";

export function LinkRenderDemo() {
  return (
    <div className="flex flex-col gap-x-6 gap-y-4 text-base md:flex-row">
      <Link render={<CustomRouterLink href="/dashboard" />} variant="inline">
        Dashboard (via render)
      </Link>
      <Link
        render={
          <CustomRouterLink
            href="https://developers.cloudflare.com"
            target="_blank"
            rel="noopener noreferrer"
          />
        }
        variant="inline"
      >
        Cloudflare Docs <Link.ExternalIcon />
      </Link>
    </div>
  );
}

API Reference

Link Props

Extends all native anchor element attributes.

Prop	Type	Default	Description
variant	“inline” \| “current” \| “plain"	"inline”	Visual style variant
render	ReactElement	-	Element to render with Link props merged onto it
href	string	-	Link destination URL
className	string	-	Additional CSS classes
children	ReactNode	-	Link content

Variants

Variant	Description	Use Case
inline	Primary color with underline	Default for inline text links
current	Inherits parent text color with underline	Links within colored contexts (alerts, errors)
plain	Primary color without underline	Navigation links, menus, footers

Link.ExternalIcon

SVG icon component to indicate external links. Accepts all SVG element attributes.

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site <Link.ExternalIcon />
</Link>

Design Guidelines

When to Use Each Variant

inline: Default choice for links within body text
current: Links inside alerts, banners, or other colored containers
plain: Navigation menus, footers, or where underlines are distracting

External Link Indicators

Always use Link.ExternalIcon for links that open in new tabs
Set target="_blank" and rel="noopener noreferrer" for security
The icon provides a visual cue that users will leave the current site

Framework Integration

Use the render prop with React Router, Next.js, or other framework links
Pass your framework’s Link component as the render prop value
This preserves client-side navigation while applying Kumo styling
Alternatively, configure a global LinkProvider for automatic integration

Accessibility

Links are keyboard focusable by default
The external icon has aria-hidden="true" - add descriptive text for screen readers
Ensure sufficient color contrast for all variants
Use descriptive link text (avoid “click here”)