Link

Import

import { Link } from '@heroui/react';

Usage

Simple link External link to HeroUIDisabled link

"use client";

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

export function LinkBasic() {
  return (
    <div className="flex flex-col gap-3">
      <Link href="#">Simple link</Link>

      <Link href="https://heroui.com" rel="noopener noreferrer" target="_blank">
        External link to HeroUI
        <Link.Icon />
      </Link>

      <Link isDisabled href="#">
        Disabled link
      </Link>
    </div>
  );
}

With Icons

Default with icon Custom icon Home

"use client";

import {Link} from "@heroui/react";
import {Icon} from "@iconify/react";

export function LinkWithIcon() {
  return (
    <div className="flex flex-col gap-3">
      <Link href="#">
        Default with icon
        <Link.Icon />
      </Link>

      <Link className="gap-1" href="#">
        Custom icon
        <Link.Icon>
          <Icon className="size-4" icon="gravity-ui:arrow-up-right-from-square" />
        </Link.Icon>
      </Link>

      <Link className="gap-1" href="#">
        <Link.Icon>
          <Icon className="size-4" icon="gravity-ui:house" />
        </Link.Icon>
        Home
      </Link>
    </div>
  );
}

Styling

Passing Tailwind CSS classes

import {Link} from '@heroui/react';

function CustomLink() {
  return (
    <Link
      href="#"
      className="text-lg font-bold text-accent hover:text-accent/80"
    >
      Custom styled link
    </Link>
  );
}

Customizing the component classes

To customize the Link component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .link {
    @apply font-semibold no-underline hover:underline;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Link component uses these CSS classes (View source styles):

Base Classes

.link - Base link styles with underline on hover

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Focus: :focus-visible or [data-focus-visible="true"]
Disabled: :disabled or [aria-disabled="true"]

API Reference

Link Props

Prop	Type	Default	Description
`href`	`string`	-	URL for navigation
`target`	`string`	-	Specifies where to open the linked document
`rel`	`string`	-	Specifies the relationship between documents
`isDisabled`	`boolean`	`false`	Disables link interaction
`showIcon`	`boolean`	`false`	Shows the link icon
`iconPlacement`	`"start" \| "end"`	`"end"`	Position of the icon
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Link content
`onPress`	`(e: PressEvent) => void`	-	Handler called when the link is pressed
`autoFocus`	`boolean`	-	Whether the element should receive focus on render

Link.Icon Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props with child element
`children`	`React.ReactNode`	-	Custom icon element
`className`	`string`	-	Additional CSS classes

On this page