# Link
**Category**: react
**URL**: https://www.heroui.com/docs/react/components/link
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(navigation)/link.mdx
> A styled anchor component for navigation with built-in icon support
***
## Import
```tsx
import { Link } from '@heroui/react';
```
### Usage
```tsx
import {Link} from "@heroui/react";
export function LinkBasic() {
return (
Call to action
);
}
```
### Anatomy
Import the Link component and access all parts using dot notation.
```tsx
import { Link } from '@heroui/react';
export default () => (
Call to action
);
```
### Custom Icon
```tsx
import {ArrowUpRightFromSquare, Link as LinkIcon} from "@gravity-ui/icons";
import {Link} from "@heroui/react";
export function LinkCustomIcon() {
return (
External link
Go to page
);
}
```
### Icon Placement
```tsx
import {Link} from "@heroui/react";
export function LinkIconPlacement() {
return (
Icon at end (default)
Icon at start
);
}
```
### Text Decoration with Tailwind CSS
```tsx
import {Link} from "@heroui/react";
export function LinkUnderlineAndOffset() {
return (
);
}
```
**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](https://tailwindcss.com/docs/text-decoration-line)
- [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color)
- [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style)
- [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness)
- [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset)
Available BEM classes:
- Base: `link`
- Icon: `link__icon`
## Related Components
- **Breadcrumbs**: Display the user's current location within a hierarchy
### Custom Render Function
```tsx
"use client";
import {Link} from "@heroui/react";
export function CustomRenderFunction() {
return (
}>
Call to action
);
}
```
## Styling
### Passing Tailwind CSS classes
```tsx
import { Link } from '@heroui/react';
function CustomLink() {
return (
Custom styled link
);
}
```
### Customizing the component classes
To customize the Link component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).
```css
@layer components {
.link {
@apply font-semibold no-underline hover:underline;
}
}
```
HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/link.css)):
#### 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
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `href` | `string` | - | Destination URL for the anchor |
| `target` | `string` | `"_self"` | Controls where to open the linked document |
| `rel` | `string` | - | Relationship between the current and linked documents |
| `download` | `boolean \| string` | - | Prompts file download instead of navigation |
| `isDisabled` | `boolean` | `false` | Disables pointer and keyboard interaction |
| `className` | `string` | - | Custom classes merged with the default styles |
| `children` | `React.ReactNode` | - | Content rendered inside the link |
| `onPress` | `(e: PressEvent) => void` | - | Fired when the link is activated |
| `autoFocus` | `boolean` | - | Whether the element should receive focus on render |
| `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.|
### Link.Icon Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Custom icon element; defaults to the built-in arrow icon when omitted |
| `className` | `string` | - | Additional CSS classes |
### Using with Routing Libraries
Use variant functions to style framework-specific links like Next.js:
```tsx
import { Link } from '@heroui/react';
import { linkVariants } from '@heroui/styles';
import NextLink from 'next/link';
export default function Demo() {
const slots = linkVariants();
return (
About Page
);
}
```
### Direct Class Application
Since HeroUI uses [BEM](https://getbem.com/) classes, you can apply Link styles directly to any link element:
```tsx
import NextLink from 'next/link';
// Apply classes directly with Tailwind utilities
export default function Demo() {
return (
About Page
);
}
// Or with a native anchor
export default function NativeLink() {
return (
About Page
);
}
```