Link
A Link component is a UI element that allows users to navigate from one page or section to another within a web application or website. Typically styled as underlined text or buttons, links provide a clear indication of interactivity. They can point to internal or external resources and often include features like hover effects or icons to enhance user experience and accessibility.
# Demo
Basic Links
Simple anchor links and clickable elements.
Internal Links
Clickable Elements
Links that act as buttons with onClick handlers.
Basic Click Actions
Click Counter Link
Custom Action Link
Download File
Action Results
Click Count: 0
Last Action: None
Links with Icons
Enhanced links with icon elements for better visual appeal.
Contact Links
Social Links
Navigation Links
Links styled for navigation menus and breadcrumbs.
Main Navigation
Breadcrumb Navigation
Sidebar Navigation
Link Styles
Different visual styles for various use cases.
Accessibility Features
Links with proper accessibility attributes and keyboard support.
Keyboard Navigation
All links are keyboard accessible. Use Tab to navigate and Enter/Space to activate.
Focus me and press Enter or Space
Screen Reader Support
Download PDF Report
PDF file, 2.5 MB
Interactive Demo
Try different link interactions and see the results.
Test Links
Action Results
Total Clicks: 0
Last Action:None
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| href | string | Optional | URL for anchor links. |
| children | React.ReactNode | Required | Link content. |
| className | string | ' ' | You can customise by passing tailwind classes. |
# Tags