Link
Links navigate users to different pages or sections. They can be inline within text or standalone as clickable elements.
Variants
This is a sentence with an inline link in the middle.
External Links
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'inline' | 'standalone' | 'inline' | Visual style variant of the link |
showIcon | boolean | - | Whether to show an external link icon (for external links only) |
external | boolean | - | Whether this is an external link (auto-adds target="_blank" and rel="noopener noreferrer") |
href* | string | - | URL the link points to |
children* | React.ReactNode | - | Link content |
Usage Guidelines
When to use
- •For navigation between pages within the application
- •For external references to documentation or resources
- •For anchor links to sections within a page
Best practices
- •Use inline variant for links within paragraphs or sentences
- •Use standalone variant for navigation lists or card links
- •Always mark external links with external prop for security
- •Consider showing icon for external links to set user expectations
- •Use descriptive link text (avoid "click here" or "read more")
Accessibility
- •All links have proper focus states for keyboard navigation
- •External links automatically get rel="noopener noreferrer" for security
- •Link text should be descriptive of the destination
- •Links are distinguishable from regular text through color and underline
Do's and Don'ts
✓ Do
- •Use descriptive link text that indicates the destination
- •Mark external links with the external prop for security
- •Use inline variant for links within body text
- •Show icon for external links to set clear expectations
- •Use standalone variant for navigation and lists
Learn more about our privacy policy and terms of service.
✗ Don't
- •Don't use vague text like "click here" or "read more"
- •Don't forget to mark external links with external prop
- •Don't use standalone variant in the middle of sentences
- •Don't use links for actions that don't navigate (use Button)
- •Don't make entire long sentences into links
For more information about our policies and how we handle your data, click here.
Related Components
Button
For actions and interactions
Breadcrumb
Navigation trail with links
Navigation
Primary site navigation