Link

Link is the styled text link. It renders an anchor with the link class, smooth-scrolls to anchors on the same page, and adds safe rel values to links that open a new tab. In @systhemaui/next it wraps next/link, so internal links get client-side navigation and prefetching.

import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph className="max-w-xl">
      Read the <Link href="/getting-started/quick-start">quick start</Link>, then come back here to
      style your first component.
    </Paragraph>
  )
}

ImportLink to this section

import { Link } from '@systhemaui/next'

In a React app without Next.js, import it from @systhemaui/react. That version renders a plain <a> with the same class and click handling.

ExamplesLink to this section

Same-page anchorsLink to this section

A hash href that points at the current page scrolls smoothly to the target element instead of jumping. This works for #id and for /current/path#id. Try it: the link below scrolls to the Accessibility section of this page.

import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      Jump to <Link href="#accessibility">the accessibility notes</Link>.
    </Paragraph>
  )
}

The scroll is skipped when the target does not exist, when the visitor holds a modifier key or uses another mouse button, and for target="_blank". A bare href="#" does nothing at all, instead of jumping to the top of the page.

Links that open a new tabLink to this section

With target="_blank", rel defaults to noopener noreferrer. Pass your own rel to override it. Tell screen-reader users that the link opens a new tab with a visually hidden cue:

import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      See the{' '}
      <Link href="https://tailwindcss.com/docs" target="_blank">
        Tailwind CSS documentation
        <span className="sr-only!"> (opens in new tab)</span>
      </Link>
      .
    </Paragraph>
  )
}

Without the transitionLink to this section

Link adds the transitionClasses from your Systhema config (for example duration-300 ease-out-cubic), which animate the hover color. Pass disableAnimation to drop them.

import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      This <Link href="#examples" disableAnimation>
        link
      </Link>{' '}
      changes color instantly on hover.
    </Paragraph>
  )
}

PropsLink to this section

Link takes every anchor attribute. In @systhemaui/next it also takes the next/link props (prefetch, replace, scroll), and href is required.

HTML and CSSLink to this section

Without React, add the link class to an anchor. The colors come from the link tokens of the active color system, with a separate hover color for the text and the underline:

<p class="text-body color-body">
  Read the <a class="link" href="/getting-started/quick-start">quick start</a>.
</p>
<a class="link" href="https://example.com" target="_blank" rel="noopener noreferrer">
  Example<span class="sr-only!"> (opens in new tab)</span>
</a>

Add your own transition utilities (duration-300) for the hover animation; the component adds them from the config. The smooth hash scrolling is JavaScript, so a plain HTML link jumps.

Next.jsLink to this section

The @systhemaui/next Link renders next/link through the LinkHelper, so internal routes navigate on the client and prefetch, while the same-page hash scrolling and the rel default stay the same as in React. Use it for every internal link in a Next.js app.

import { Link } from '@systhemaui/next'

export function Footer() {
  return (
    <nav aria-label="Legal">
      <Link href="/privacy" prefetch={false}>
        Privacy policy
      </Link>
    </nav>
  )
}

Button.a, Chip.a, Icon.a, MediaWrapper.a and Card.link use the same helper.

AccessibilityLink to this section

• Link text names the destination. Avoid "click here" and bare URLs.
• A link with target="_blank" gets rel="noopener noreferrer" by default. Add an "(opens in new tab)" cue as visually hidden text (sr-only!), or in the aria-label of an icon-only link.

See Links that open a new tab.

RelatedLink to this section

• Button (Button.a for links styled as buttons)
• Utilities
• Typography