Link
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration
Link
Styled anchor component with variants, icons, external behavior, disabled state and inline usage for rich text content.
Variants
Use the variant prop to switch between default, primary, muted and underline styles depending on the context.
With icons
Combine Link with icons to indicate actions such as navigation, download or external destinations.
External links
Use the external prop to mark links that open in a new tab. This automatically sets target and rel for security.
Disabled
Prevent interaction with the disabled prop. Useful when a link represents an action that is not yet available.
Inline text usage
Use Link inline with body text to highlight actions or references inside paragraphs.
Inline example
By using this product you agree to our Terms of Service and Privacy Policy. For more details, see the documentation.
Usage Guidelines
When to Use
- Navigation between pages
- External links
- Internal anchors
Accessibility
- Proper focus states
- External link announcements
- rel='noopener noreferrer' for security
Performance
- Next.js Link prefetching
- No external dependencies
Common Mistakes
- Using Link for actions (use Button)
- Missing rel='noopener' on external
Frequently Asked Questions
Related Components
View allApplication bar with scroll effects, elevation changes, and fixed/sticky positioning
Mobile bottom navigation bar with icon labels and active state indicators
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Horizontal menu bar implementing nested dropdown menus with keyboard navigation, ARIA menubar pattern, and collision detection