Link

When to use

• Going to another page or another site
• Jumping to a section of the page
• Downloading a file

Not for actions that change something on the page — use a Button.

Choosing between actions and navigation:

Component	Use it for	For example
Button	Does something on this page: saves, deletes, opens a dialog	“Save”, “Delete”, “Add to cart”
Link	Goes somewhere: another page, a section, a file	“View invoice”, “Read the docs”
Toggle	Turns a state on or off and stays pressed	“Bold”, “Mute”

Choosing between moving around:

Component	Use it for	For example
Breadcrumb	Showing where the page sits in a hierarchy, with links up it	Home / Projects / Website
Pagination	Moving between pages of one long list	Search results, page 3 of 12
Tabs	Switching between views within one page	Overview / Activity / Settings
Link	One destination	“Read the docs”

Read the installation guide, then pick a brand in Theming and brands. Sources are on GitHub (opens in a new tab).

import { Link } from '@arun-dev/ui';
import { docsUrl } from '@/lib/url';

export default function LinkBasics() {
  return (
    <p style={{ margin: 0, maxInlineSize: '32rem' }}>
      {/* docsUrl adds the site's base path, as a router's link would. */}
      Read the <Link href={docsUrl('/getting-started/installation/')}>installation guide</Link>,
      then pick a brand in{' '}
      <Link href={docsUrl('/getting-started/theming/')}>Theming and brands</Link>. Sources are on{' '}
      <Link href="https://github.com/arun9483/arun-design-system" target="_blank" rel="noreferrer">
        GitHub (opens in a new tab)
      </Link>
      .
    </p>
  );
}

Link is always an <a href>, so focus, Enter, “open in new tab” and the back button are the browser’s. Use it to go somewhere. To do something, such as save or delete, use a Button.

With a router

Pass your router’s link through render. The styling stays, and the router handles the click:

import NextLink from 'next/link';

<Link render={<NextLink href="/docs" />}>Docs</Link>;

Props

Link props

Prop	Type	Default	Description
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• There is no disabled: it has no meaning on a link. Render plain text instead.
• Opening in a new tab is your choice, per link: add target="_blank" and rel="noreferrer", and say so in the text.
• A link to a page already visited takes --link-color-visited, as a native link does: the accent pulled toward the text colour, so it stays readable for any brand. Only colours can change on :visited; the browser ignores anything else there, for privacy. Breadcrumb, Pagination and link cards don’t mark visited pages — they navigate, where every page is one you have seen.
• Restyle with --link-color, --link-color-hover, --link-color-visited and --link-underline-*.