The Link component provides accessible navigation with support for external links, custom styling, and seamless integration with popular routing libraries like Next.js, React Router, and Remix.
import { Link } from '@flexi-ui/link'A simple link to navigate between pages:
Choose from various color schemes to match your design:
Visit our documentation to learn more.
Check the latest updates for new features.
Report an issue if you encounter problems.
Links come in three sizes to fit different contexts:
Control when the underline appears with different underline variants:
Links to external websites can be marked with the isExternal prop:
Display an external link icon to indicate the link opens in a new tab:
FlexiUI is built with React and TypeScript. Check out the
React documentation
and
TypeScript documentation
for more information.
Make links display as block elements to take up full width:
Prevent link interaction with the isDisabled prop:
The Link component works seamlessly with popular routing libraries.
Use the Link component with Next.js routing:
Use with React Router's Link component:
Use with Remix's Link component:
Customize links with additional CSS classes:
Add custom icons to your links:
A complete navigation menu with links:
Create breadcrumb navigation with links:
A comprehensive footer with organized links:
Cards featuring multiple links:
Everything you need to start building with FlexiUI.
A sidebar menu with active state indication:
Links naturally integrated into content:
FlexiUI is a modern React component library built with
Tailwind CSS
and
TypeScript
. It provides a comprehensive set of accessible components for building beautiful user interfaces.
To get started, check out our
installation guide
or explore the
component documentation
. You can also view
example projects
to see FlexiUI in action.
Need help? Join our
Discord community
or
report an issue
on GitHub.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | The URL to navigate to (required) |
color | 'foreground' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'primary' | The color theme of the link |
size | 'sm' | 'md' | 'lg' | 'md' | The size of the link |
underline | 'none' | 'hover' | 'always' | 'active' | 'focus' | 'none' | When to show the underline |
isExternal | boolean | false | Whether the link opens in a new tab. Automatically adds target="_blank" and rel="noopener noreferrer" |
showAnchorIcon | boolean | false | Whether to show an external link icon (only works with isExternal) |
isDisabled | boolean | false | Whether the link is disabled. Disables click events and adds aria-disabled |
isBlock | boolean | false | Whether the link should display as a block element |
as | ElementType | 'a' | The component to render as (useful for framework integration) |
className | string | - | Additional CSS classes to apply |
children | ReactNode | - | The content of the link |
The Link component also accepts all standard HTML anchor (<a>) attributes:
target - Where to open the linked documentrel - Relationship between current and linked documentdownload - Specifies that the target will be downloadedhrefLang - Language of the linked documentreferrerPolicy - Referrer policy for the linkThe Link component is built with accessibility in mind and follows WAI-ARIA best practices.
Try navigating with your keyboard:
Links automatically include appropriate ARIA attributes:
Provide descriptive link text for screen readers:
<a> elements for proper semanticsaria-disabled, aria-label, and other ARIA attributesrel="noopener noreferrer" for external linksAlways use clear, descriptive text that explains where the link goes or what action it performs:
Avoid generic text
Click hereUse descriptive text
Learn more about our featuresAlways mark external links with isExternal and consider using showAnchorIcon:
Choose underline variants that match your design and improve usability:
For body text links, use
hover underline
to indicate interactivity.
For navigation menus, use
no underline
for a cleaner look.
Ensure links have enough contrast with surrounding text:
Maintain consistency across your application:
Ensure links are large enough for touch interaction (minimum 44x44px):
Match link colors to their meaning and context:
Problem: Links reload the page instead of using client-side navigation.
Solution: Use the as prop to integrate with your router:
Use the 'as' prop with your router's Link component
Problem: External links open in the same tab despite using isExternal.
Solution: Ensure you're using the isExternal prop correctly:
Incorrect
External LinkCorrect
External Link
Problem: Disabled links can still be clicked and navigated.
Solution: The isDisabled prop adds aria-disabled and prevents default behavior, but ensure your event handlers respect this:
Problem: Custom className styles are being overridden.
Solution: Use Tailwind's modifier classes or increase specificity:
Problem: External link icon doesn't appear despite using showAnchorIcon.
Solution: Ensure you also set isExternal:
Problem: Focus outline is hard to see on certain backgrounds.
Solution: Use the underline="focus" variant or custom focus styles:
On this page