Link

Inline hyperlink with PRIZM styling.

stable

Preview

Read the getting started guide or browse the component catalog to begin.

Code

tsx

import { Link } from "@/components/ui/link";

export function Example() {
  return (
    <p>
      Read the <Link href="/docs/getting-started">getting started guide</Link>{" "}
      or browse the <Link href="/components">component catalog</Link>.
    </p>
  );
}

Props

Prop	Type	Default	Description
href	`string`	—	Destination. Internal links use client-side navigation via Next.js Link.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Wraps `next/link`. Spreads all `<a>` attributes (target, rel, etc.) for external links.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/link.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import NextLink from "next/link";
import type { ComponentProps } from "react";

export function Link({ className, ...props }: ComponentProps<typeof NextLink>) {
  return (
    <NextLink
      className={cn(
        "text-accent underline-offset-4 transition-colors hover:underline",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        className,
      )}
      {...props}
    />
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmLink (extends Hyperlink). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmLink;

PrizmLink()
PrizmLink(String text)

Hyperlink restyled to accent text, underline-on-hover, no focus border. Wire navigation with setOnAction. Mirrors components/ui/link.tsx.