Link

Link renders an a element with themed color and underline styles. Use it for navigation in text, tables and panels.

Usage#

import { Link } from "@clawscale/react";

<Link href="/datasets/orders_daily">orders_daily</Link>

Examples#

Basic#

Pass an href and children. For external links, add target="_blank" and rel="noreferrer".

Open run log Source on GitHub

core/link/basic.tsx

import { Link } from "@clawscale/react";

export default function LinkBasic() {
  return (
    <>
      <Link href="#run-log">Open run log</Link>
      <Link href="https://github.com/prashantonomy/clawscalejs" target="_blank" rel="noreferrer">
        Source on GitHub
      </Link>
    </>
  );
}

Color#

color takes an intent: primary (default), success, warning or danger. inherit takes the color of the surrounding text.

View dataset 12 checks passed 2 warnings 424 rows rejectedOwned by data-platform

core/link/color.tsx

import { Classes, Link } from "@clawscale/react";

export default function LinkColor() {
  return (
    <>
      <Link href="#dataset">View dataset</Link>
      <Link color="success" href="#checks">
        12 checks passed
      </Link>
      <Link color="warning" href="#warnings">
        2 warnings
      </Link>
      <Link color="danger" href="#rejected">
        424 rows rejected
      </Link>
      <span className={Classes.TEXT_MUTED}>
        Owned by{" "}
        <Link color="inherit" href="#team">
          data-platform
        </Link>
      </span>
    </>
  );
}

Underline#

underline sets when the underline shows: always (default), hover or none. Keep always in running text, so links do not rely on color alone.

Always underlined Underlined on hover Never underlined

core/link/underline.tsx

import { Link } from "@clawscale/react";

export default function LinkUnderline() {
  return (
    <>
      <Link href="#always">Always underlined</Link>
      <Link underline="hover" href="#hover">
        Underlined on hover
      </Link>
      <Link underline="none" href="#none">
        Never underlined
      </Link>
    </>
  );
}

Props interface#

The props are exported as LinkComponentProps, because LinkProps names the href and target pair that other components share. Link also accepts the HTML attributes of an a.

interface LinkComponentProps extends Props, React.RefAttributes<HTMLAnchorElement>, React.AnchorHTMLAttributes<HTMLAnchorElement>

@clawscale/react

Props	Description
`children`	`React.ReactNode` Child nodes to render inside the link.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`color`	`Intent \| "inherit"` = `Intent.PRIMARY` Color of the link text.
`underline`	`"always" \| "hover" \| "none"` = `"always"` Underline behavior for the link.