LinkUpdated

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">

Text Decoration with Tailwind CSS

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

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

Text Decoration Line:

• underline - Always visible underline
• no-underline - Remove underline
• hover:underline - Underline appears on hover

Text Decoration Color:

• decoration-primary, decoration-secondary, etc. - Set underline color using theme colors
• decoration-muted/50 - Use opacity modifiers for semi-transparent underlines

Text Decoration Style:

• decoration-solid - Solid line (default)
• decoration-double - Double line
• decoration-dotted - Dotted line
• decoration-dashed - Dashed line
• decoration-wavy - Wavy line

Text Decoration Thickness:

• decoration-1, decoration-2, decoration-4, etc. - Control underline thickness

Underline Offset:

• underline-offset-1, underline-offset-2, underline-offset-4, etc. - Adjust spacing between text and underline

For more details, see the Tailwind CSS documentation:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-underline-offset

Available BEM classes:

• Base: link
• Icon: link__icon

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
• .link__icon - Link icon styles

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

Using with Routing Libraries

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

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

export default function Demo() {
  const slots = linkVariants();

  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 with Tailwind utilities
export default function Demo() {
  return (
    <NextLink href="/about" className="link hover:underline underline-offset-2">
      About Page
    </NextLink>
  );
}

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