hrefreq- Type
string- Default
- -
- Description
- Anchor navigation reference target URL.
Components / Actions
Link
இணைப்பு
Links navigate users to a new page or section. Use the native Next.js Link component styled with Tailwind. Reserve buttons for actions; use links for navigation.
இணைப்புகள் பயனர்களை புதிய பக்கம் அல்லது பகுதிக்கு வழிசெலுத்துகின்றன.
Inline links
Component preview
Content linksஉள்ளடக்க இணைப்புகள்Navigation links
Component preview
Back and next linksபின் மற்றும் அடுத்த இணைப்புகள்Structure
Anatomy
3 parts documented for implementation and review.
1
Link text
இணைப்பு உரைrequiredVisible clickable text that describes the destination. Never use generic text like click here — state the destination or action. For Tamil, use natural phrasing. Screen readers announce this text.
2
Underline
கீழ்கோடுUnderline decoration using underline-offset-2. Required for inline links per WCAG to ensure links are distinguishable from surrounding text without relying on color alone.
3
External icon
வெளி சின்னம்svgTrailing ExternalLink icon (h-3 w-3) indicating the link opens in a new tab. Helps users anticipate navigation behavior. Use ArrowRight for same-site navigation links.
Usage guidance
- Use Link for navigation (goes somewhere). Use Button for actions (does something).
- External links must have
target="_blank" rel="noopener noreferrer"and theExternalLinkicon. - Tamil link text: always use
font-tamilso Noto Sans Tamil renders correctly. - Use Next.js
Linkfor internal routes — never<a href="...">for same-site navigation.
API
Props
className- Type
string- Default
- -
- Description
- Custom stylesheet rules.
| Prop | Type | Default | Description |
|---|---|---|---|
hrefreq | string | - | Anchor navigation reference target URL. |
className | string | - | Custom stylesheet rules. |
Best practices
Use descriptive link text
விளக்கமான இணைப்பு உரை பயன்படுத்தவும்
Write link text that describes the destination — 'ஆதார் PDF பதிவிறக்கம்' tells users exactly where the link goes.
'ஆதார் PDF பதிவிறக்கம்' என்று இணைப்பு செல்லும் இடத்தை விளக்கும் உரை பயன்படுத்தவும்.
Never use 'Click here' as link text
'இங்கே கிளிக் செய்யவும்' என்று இணைப்பு உரையாக பயன்படுத்தாதே
'Click here' gives no information about the destination and is inaccessible to screen reader users scanning links.
'இங்கே கிளிக் செய்யவும்' என்பது இணைப்பு எங்கு செல்கிறது என்று சொல்லாது மற்றும் திரை வாசகர்களுக்கு பயனில்லாதது.
Add target='_blank' and rel for external links
வெளி இணைப்புகளுக்கு target='_blank' மற்றும் rel சேர்க்கவும்
External links must open in a new tab with rel='noopener noreferrer' for security, paired with the ExternalLink icon.
வெளி இணைப்புகள் புதிய தாவலில் திறக்க வேண்டும் மற்றும் பாதுகாப்புக்காக rel='noopener noreferrer' சேர்க்க வேண்டும்.
Don't style links to look like buttons
இணைப்புகளை பொத்தான் போல் காட்டாதே
Links are for navigation; buttons are for actions — mixing their visual styles creates confusion about what will happen.
இணைப்புகள் வழிசெலுத்துவதற்கு, பொத்தான்கள் செயல்களுக்கு — இவற்றின் தோற்றத்தை கலப்பது குழப்பத்தை உருவாக்கும்.