LinkButton - Kumo

Read Link docs

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

/** Default LinkButton — anchor styled as a button. */
export function LinkButtonBasicDemo() {
  return <LinkButton href="/components/link">Read Link docs</LinkButton>;
}

Installation

Barrel

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

Granular

import { LinkButton } from "@cloudflare/kumo/components/button";

LinkButton renders an <a> element with Button-style classes. Use it whenever the interaction is navigation but the affordance should match a button — for example a “Read the docs” call to action sitting next to a primary Button.

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

export default function Example() {
  return <LinkButton href="/components/button">Read Button docs</LinkButton>;
}

LinkButton integrates with LinkProvider so the underlying anchor renders through your framework’s link component (e.g. Next.js Link). When no provider is set it falls back to a plain <a>.

Examples

Variants

LinkButton reuses Button’s variant table. The default variant is "ghost" because in-line text-style links read most naturally that way; switch to "primary" or "secondary" for prominent navigation.

Primary Secondary Ghost

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

/** Variants follow Button's classes; default is `"ghost"`. */
export function LinkButtonVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <LinkButton href="/components/link" variant="primary">
        Primary
      </LinkButton>
      <LinkButton href="/components/link" variant="secondary">
        Secondary
      </LinkButton>
      <LinkButton href="/components/link" variant="ghost">
        Ghost
      </LinkButton>
    </div>
  );
}

With Icon

Read the docs

import { LinkButton } from "@cloudflare/kumo";
import { BookOpenIcon } from "@phosphor-icons/react";

/** With an icon — same `icon` prop as `Button`. */
export function LinkButtonWithIconDemo() {
  return (
    <LinkButton href="/components/link" variant="secondary" icon={BookOpenIcon}>
      Read the docs
    </LinkButton>
  );
}

External Links

Pass external to open the link in a new tab. The component sets target="_blank" and rel="noopener noreferrer" for you.

Cloudflare Docs

import { LinkButton } from "@cloudflare/kumo";
import { ArrowSquareOutIcon } from "@phosphor-icons/react";

/** `external` opens in a new tab with `rel="noopener noreferrer"`. */
export function LinkButtonExternalDemo() {
  return (
    <LinkButton
      href="https://developers.cloudflare.com"
      variant="ghost"
      icon={ArrowSquareOutIcon}
      external
    >
      Cloudflare Docs
    </LinkButton>
  );
}

API Reference

Prop	Type	Default	Description
children	`ReactNode`	-	-
className	`string`	-	-
icon	`ReactNode`	-	Icon from `@phosphor-icons/react` or a React element. Rendered before children.
external	`boolean`	-	When `true`, opens in a new tab with `rel="noopener noreferrer"`.
linksExternal	`boolean`	-	-
shape	`"base" \| "square" \| "circle"`	`"base"`	Button shape. - `"base"` — Default rectangular button - `"square"` — Square button for icon-only actions - `"circle"` — Circular button for icon-only actions
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Button size. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary actions - `"base"` — Default size - `"lg"` — Large for primary CTAs
variant	`"primary" \| "secondary" \| "ghost" \| "destructive" \| "secondary-destructive" \| "outline"`	`"ghost"`	Visual style of the button. - `"primary"` — High-emphasis, brand-colored for primary actions - `"secondary"` — Default style with border for most actions - `"ghost"` — Minimal, no background for tertiary actions - `"destructive"` — Danger button for destructive actions - `"secondary-destructive"` — Secondary style with destructive text - `"outline"` — Bordered with transparent background
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
download	`unknown`	-	-
href	`string`	-	-
hrefLang	`string`	-	-
media	`string`	-	-
ping	`string`	-	-
target	`React.HTMLAttributeAnchorTarget`	-	-
type	`string`	-	-
referrerPolicy	`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`	-	-