Skip to content
Lenso UI

Link

Migration guide for Link from HeroUI v2 to v3

Refer to the v3 Link documentation for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.

Key Changes

1. Component Structure

v2: Single component with icon props
v3: Compound component: Link.Icon for icons

2. Prop Changes

v2 Propv3 LocationNotes
showAnchorIcon, anchorIcon-Use Link.Icon component with children
isExternal-Use target="_blank" and rel="noopener noreferrer"
size, color, isBlock-Removed (use Tailwind CSS)
disableAnimation-Removed
underline-Removed (use Tailwind underline, etc.)

3. New Props

  • onPress - Event handler fired when the link is activated (via click or keyboard). Accepts a (e: PressEvent) => void callback.

Structure Changes

In v2, Link component usage:

import { Link } from "@lenso/ui";
export default function App() {  return <Link href="#">Default Link</Link>;}

In v3, Link component usage remains the same for basic cases:

import { Link } from "@lenso/ui";
export default function App() {  return <Link href="#">Default Link</Link>;}

Migration Examples

With Icons

{/* Default icon */}<Link showAnchorIcon href="#">  External Link</Link>
{/* Custom icon */}<Link  showAnchorIcon  anchorIcon={<CustomIcon />}  href="#">  Custom Icon</Link>
<Link isExternal href="https://example.com">  External Link</Link>

Underline and offset (v3: use Tailwind)

<Link href="#" underline="hover">  Hover to underline</Link>

With routing libraries

import NextLink from "next/link";import { Link } from "@lenso/ui";
<Link as={NextLink} href="/about">  About</Link>

Component Anatomy

The v3 Link follows this structure:

Link (Root)  ├── Link content (text)  └── Link.Icon (optional)

Summary

  1. Icon Handling: showAnchorIcon and anchorIcon props replaced with Link.Icon component
  2. External Links: isExternal prop removed - handle manually with target and rel
  3. Size Prop Removed: Use Tailwind CSS classes (text-sm, text-base, text-lg)
  4. Color Prop Removed: Use Tailwind CSS classes (text-primary, text-danger, etc.)
  5. Block Prop Removed: Use Tailwind CSS classes (block, hover:bg-surface)
  6. Underline: No longer a prop; Link underlines on hover by default. Use Tailwind (underline, no-underline, underline-offset-1, etc.) to customize it.
  7. Routing: v3 Link does not support as or asChild; use your router's Link with Tailwind classes (e.g. link, link__icon) for consistent styling
  8. Animation Removed: disableAnimation prop removed
  9. onPress Handler: New onPress prop available for handling link activation events (click or keyboard)