Link

Link

The Link component displays a navigational link that allows users to move between pages, sections, or external resources.

import Link from "rocksolidjs/Link";

export default function Example() {
  return <Link href="/introduction/">Introduction</Link>;
}

Examples

Colors

Use the color prop to control the semantic color of the Link.

import Link from "rocksolidjs/Link";

export default function Example() {
  return (
    <div class="flex flex-wrap justify-center items-center gap-4">
      <Link href="#" color="inherit">
        Inherit
      </Link>
      <Link href="#" color="default">
        Default
      </Link>
      <Link href="#" color="success">
        Success
      </Link>
      <Link href="#" color="warning">
        Warning
      </Link>
      <Link href="#" color="info">
        Info
      </Link>
      <Link href="#" color="error">
        Error
      </Link>
      <Link href="#" color="textPrimary">
        TextPrimary
      </Link>
      <Link href="#" color="textSecondary">
        TextSecondary
      </Link>
      <Link href="#" color="textTertiary">
        TextTertiary
      </Link>
      <Link href="#" color="disabled">
        Disabled
      </Link>
    </div>
  );
}

Underline

Use the underline prop to control when the Link displays an underline.

import Link from "rocksolidjs/Link";

export default function Example() {
  return (
    <div class="flex flex-wrap items-center gap-4">
      <Link href="#" underline="always">
        Always
      </Link>
      <Link href="#" underline="hover">
        Hover
      </Link>
      <Link href="#" underline="none">
        None
      </Link>
    </div>
  );
}

Truncate

Use the truncate prop to truncate long Link content when it exceeds the available space.

import Link from "rocksolidjs/Link";

export default function Example() {
  return (
    <div class="w-64">
      <Link href="#" truncate>
        This is a very long link that will be truncated when it exceeds
        the available width.
      </Link>
    </div>
  );
}

Custom Styling

Use the class prop to apply custom CSS classes to the Link.

import Link from "rocksolidjs/Link";

export default function Example() {
  return (
    <Link
      href="/components/button"
      class="font-semibold text-blue-600 dark:text-blue-500"
    >
      Custom styled link
    </Link>
  );
}

Accessibility

  • Use descriptive Link text that communicates the destination or action.
  • Avoid vague Link text such as Click here when more descriptive text is available.
  • Ensure Link text has sufficient color contrast against its background.
  • Do not rely on color alone to distinguish Links from surrounding text.
  • Use underlines when appropriate to make Links easy to identify.
  • When linking to an external resource, make the destination clear to users.
  • Ensure truncated Link content remains understandable and does not hide important information.

API

The Link component supports custom content, navigation destinations, semantic colors, underline styles, truncation, and custom CSS classes.

Prop Type Required Default Description
children JSXElement No — Content displayed inside the Link.
class string No — Custom CSS class to apply to the Link.
color "inherit" | "default" | "success" | "warning" | "info" | "error" | "textPrimary" | "textSecondary" | "textTertiary" | "disabled" No "default" Controls the semantic color of the Link.
href string No — Specifies the URL or path that the Link navigates to.
truncate boolean No false Truncates the Link content when it exceeds the available space.
underline "always" | "hover" | "none" No "hover" Controls when the Link displays an underline.
  • Button — Use Button for actions that change application state rather than navigate to another location.
  • Typography — Use Typography for styled text content without navigation behavior.