# Link **Category**: react **URL**: https://www.heroui.com/docs/react/migration/link **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/link.mdx > Migration guide for Link from HeroUI v2 to v3 *** Refer to the [v3 Link documentation](/docs/react/components/link) 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 Prop | v3 Location | Notes | |---------|-------------|-------| | `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: ```tsx import { Link } from "@heroui/react"; export default function App() { return Default Link; } ``` In v3, Link component usage remains the same for basic cases: ```tsx import { Link } from "@heroui/react"; export default function App() { return Default Link; } ``` ## Migration Examples ### With Icons ```tsx {/* Default icon */} External Link {/* Custom icon */} } href="#" > Custom Icon ``` ```tsx {/* Default icon */} External Link {/* Custom icon */} Custom Icon ``` ### External Link ```tsx External Link ``` ```tsx External Link ``` ### Underline and offset (v3: use Tailwind) ```tsx Hover to underline ``` ```tsx Hover to underline Underline with offset ``` ### With routing libraries ```tsx import NextLink from "next/link"; import { Link } from "@heroui/react"; About ``` ```tsx import NextLink from "next/link"; import { Link } from "@heroui/react"; {/* Style your router link with the same classes as Link; add an icon if needed */} About ``` ## 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; use Tailwind (`underline`, `hover:underline`, `no-underline`, `underline-offset-1`, etc.) 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)