Link

Import

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

Usage

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

export function LinkBasic() {
  return (
    <Link href="#">
      Call to action
      <Link.Icon />
    </Link>
  );
}

Anatomy

Import the Link component and access all parts using dot notation.

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

export default () => (
  <Link href="#">
    Call to action
    <Link.Icon />
  </Link>
);

Custom Icon

import {ArrowUpRightFromSquare, Link as LinkIcon} from "@gravity-ui/icons";
import {Link} from "@heroui/react";

export function LinkCustomIcon() {
  return (

Icon Placement

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

export function LinkIconPlacement() {
  return (
    <div className="flex flex-col gap-3">

Underline Variants

Control the underline behavior with the underline prop:

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

export function LinkUnderlineVariants() {
  return (
    <div className="flex flex-col gap-6">

• underline="hover" (default) - Animated underline appears on hover
• underline="always" - Underline always visible (50% opacity, 100% on hover)
• underline="none" - No underline

Underline Offset

Adjust the spacing between text and underline with the underlineOffset prop:

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

export function LinkUnderlineOffset() {
  return (
    <div className="flex flex-col gap-4">

• underlineOffset={1} (default) - No space
• underlineOffset={2} - 2px spacing
• underlineOffset={3} - 4px spacing

Using with Routing Libraries

Use variant functions to style framework-specific links like Next.js:

import { Link, linkVariants } from '@heroui/react';
import NextLink from 'next/link';

export default function Demo() {
  const slots = linkVariants({underline: "hover"});

  return (
    <NextLink className={slots.base()} href="/about">
      About Page
      <Link.Icon className={slots.icon()} />
    </NextLink>
  );
}

Direct Class Application

Since HeroUI uses BEM classes, you can apply Link styles directly to any link element:

import NextLink from 'next/link';

// Apply classes directly
export default function Demo() {
  return (
    <NextLink href="/about" className="link link--underline-hover link--offset-1">
      About Page
    </NextLink>
  );
}

// Or with a native anchor
export default function NativeLink() {
  return (
    <a href="/about" className="link link--underline-always link--offset-2">
      About Page
      <Link.Icon className="link__icon" />
    </a>
  );
}

Available BEM classes:

• Base: link
• Underline: link--underline-none, link--underline-hover, link--underline-always
• Offset: link--offset-1, link--offset-2, link--offset-3

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

Underline Variants

• .link--underline-none - No underline
• .link--underline-hover - Animated underline on hover (default)
• .link--underline-always - Always visible underline

Underline Offset

• .link--offset-1 - No spacing (default)
• .link--offset-2 - 2px spacing
• .link--offset-3 - 4px spacing

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

Link.Icon Props