메인 콘텐츠로 이동

Link

A styled anchor element supporting variants, sizes, and external link indicators.

Overview

Link renders a styled anchor element built on top of Typography. It supports three visual variants for different contexts, four size options, and an optional external link indicator icon.
  • Use inline for standard hyperlinks within body text.
  • Use current to indicate the active page in a navigation context (it inherits the surrounding text color).
  • Use plain for interactive text that should not appear as a traditional link.
  • For external links, always include Link.ExternalIcon and set target="_blank" with rel="noopener noreferrer".

Accessibility

  • Renders as a native <a> element with built-in keyboard support. Enter activates the link.
  • For links that open in a new tab, combine target="_blank" with rel="noopener noreferrer" to prevent security issues.
  • Link.ExternalIcon provides a visual indicator for external links. Consider also adding a screen-reader-only label like "(opens in a new tab)" for clarity.
  • Use the render prop to integrate with client-side routing (e.g., Next.js Link) while preserving the styled appearance.

Import

import { Link } from "@cocso-ui/react";

Variant

Three variants control color and underline behavior. inline is a standard hyperlink, current inherits the surrounding text color, and plain is a link without underline.
import { Link } from "@cocso-ui/react";

export default function LinkDefault() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Link href="#" variant="inline">Inline link</Link>
      <Link href="#" variant="current">Current link</Link>
      <Link href="#" variant="plain">Plain link</Link>
    </div>
  );
}

Size

The size prop maps to the Typography body size scale: large (18px), medium (16px), small (14px), x-small (12px).
import { Link } from "@cocso-ui/react";

export default function LinkSizes() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Link href="#" size="large">Large link</Link>
      <Link href="#" size="medium">Medium link</Link>
      <Link href="#" size="small">Small link</Link>
      <Link href="#" size="x-small">X-Small link</Link>
    </div>
  );
}

External

Place Link.ExternalIcon inside the link content to display an external link icon. The indicator prop lets you explicitly control the underline indicator.
import { Link } from "@cocso-ui/react";

export default function LinkExternal() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Link href="https://example.com" indicator target="_blank" rel="noopener noreferrer">
        External link <Link.ExternalIcon />
      </Link>
    </div>
  );
}

API Reference

PropTypeDefaultDescription
variant"inline" | "current" | "plain""inline"Controls the color and underline behavior. `inline` renders a colored underlined link, `current` inherits the parent text color, and `plain` removes the underline.
type"custom" | "body" | "heading""body"Selects the Typography rendering mode. Use `body` for inline text links and `heading` for larger navigational links.
size"large" | "medium" | "small" | "x-small"-Font size mapped to the Typography body scale: `large` (18px), `medium` (16px), `small` (14px), `x-small` (12px).
weightFontWeight-Overrides the font weight.
lineHeightLineHeight-Overrides the line height.
indicatorboolean-Controls whether the underline indicator is shown. Defaults to `true` for `inline` and `current` variants.
renderRenderProp-Replaces the default `<a>` element. Use this to integrate with framework-specific routing components like Next.js Link.
hrefstring-The destination URL. Passed through to the underlying anchor element.