Link

Link allows a user to navigate to another page or resource within a web page or application.

default.tsx

import { Link } from "@/lib/components/core/default/link";

function Demo() {
  return (
    <Link href="https://x.com/mehdibha_" target="_blank">
      @mehdibha_
    </Link>
  );
}

Installation

Install the following dependencies:

npm install react-aria-components

Copy and paste the following code into your project.

link.tsx

"use client";

import * as React from "react";
import {
  Link as AriaLink,
  composeRenderProps,
  type LinkProps as AriaLinkProps,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { focusRing } from "@/lib/utils/styles";

const linkVariants = tv({
  extend: focusRing,
  base: "inline-flex items-center transition-colors gap-1 disabled:text-fg-disabled",
  variants: {
    variant: {
      accent: "text-fg-accent hover:text-[#5e9fe0]",
      quiet: "underline underline-offset-2",
    },
  },
  defaultVariants: {
    variant: "accent",
  },
});

interface LinkProps extends AriaLinkProps, VariantProps<typeof linkVariants> {}

const Link = ({ variant, ...props }: LinkProps) => {
  return (
    <AriaLink
      {...props}
      className={composeRenderProps(props.className, (className) =>
        linkVariants({ variant, className })
      )}
    />
  );
};

export type { LinkProps };
export { Link, linkVariants };

Update the import paths to match your project setup.

Options

Variant

Use the variant prop to control the appearance of the link.

variants.tsx

import { Link } from "@/lib/components/core/default/link";

function Demo() {
  return (
    <div className="space-y-2">
      {(["accent", "quiet"] as const).map((variant, index) => (
        <p key={index}>
          Follow{" "}
          <Link variant={variant} href="https://x.com/mehdibha_" target="_blank">
            @mehdibha_
          </Link>{" "}
          to stay updated on dotUI latest releases.
        </p>
      ))}
    </div>
  );
}

Disabled

Use the isDisabled prop to disable the link.

disabled.tsx

import { Link } from "@/lib/components/core/default/link";

function Demo() {
  return (
    <Link href="https://x.com/mehdibha_" isDisabled>
      @mehdibha_
    </Link>
  );
}

Examples

With icon

icon.tsx

import { Link } from "@/lib/components/core/default/link";
import { ExternalLinkIcon } from "@/lib/icons";

function Demo() {
  return (
    <Link href="/docs" target="_blank">
      Docs{" "}
      <span>
        <ExternalLinkIcon className="size-4" />
      </span>
    </Link>
  );
}

API Reference

Prop	Type	Default	Description
variant	'accent' \| 'quiet'	'accent'	The visual style of the Link.
isDisabled	boolean	-	Whether the link is disabled.
autoFocus	boolean	-	Whether the element should receive focus on render.
href	Href	-	A URL to link to.
hrefLang	string	-	Hints at the human language of the linked URL.
target	HTMLAttributeAnchorTarget	-	The target window for the link.
rel	string	-	The relationship between the linked resource and the current page.
download	boolean \| string	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name.
ping	string	-	A space-separated list of URLs to ping when the link is followed.
referrerPolicy	HTMLAttributeReferrerPolicy	-	How much of the referrer to send when following the link.
routerOptions	RouterOptions	-	Options for the configured client side router.
children	ReactNode \| (values: LinkRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
className	string	-	The CSS className for the element.
style	CSSProperties \| (values: LinkRenderProps & {defaultStyle: CSSProperties}) => CSSProperties	-	The inline style for the element. A function may be provided to compute the style based on component state.

Event	Type	Description
onPress	(e: PressEvent) => void	Handler that is called when the press is released over the target.
onPressStart	(e: PressEvent) => void	Handler that is called when a press interaction starts.
onPressEnd	(e: PressEvent) => void	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChange	(isPressed: boolean) => void	Handler that is called when the press state changes.
onPressUp	(e: PressEvent) => void	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onFocus	(e: FocusEvent<Target>) => void	Handler that is called when the element receives focus.
onBlur	(e: FocusEvent<Target>) => void	Handler that is called when the element loses focus.
onFocusChange	(isFocused: boolean) => void	Handler that is called when the element's focus status changes.
onKeyDown	(e: KeyboardEvent) => void	Handler that is called when a key is pressed.
onKeyUp	(e: KeyboardEvent) => void	Handler that is called when a key is released.
onHoverStart	(e: HoverEvent) => void	Handler that is called when a hover interaction starts.
onHoverEnd	(e: HoverEvent) => void	Handler that is called when a hover interaction ends.
onHoverChange	(isHovering: boolean) => void	Handler that is called when the hover state changes.

Data attribute	Description
[data-current]	Whether the link is the current item within a list.
[data-hovered]	Whether the link is currently hovered with a mouse.
[data-pressed]	Whether the link is currently in a pressed state.
[data-focused]	Whether the link is focused, either via a mouse or keyboard.
[data-focus-visible]	Whether the link is keyboard focused.
[data-disabled]	Whether the link is disabled.

Getting Started

Components

Buttons

Inputs

Menus and Selection

Dates

Colors

Drag and drop

Feedback

Layout

Data display

Navigation

Overlay

Hooks