Link
Link
A styled link component with variants and accessibility features.
Import
import { Link } from '@primitivekit/react';Basic Usage
<Link href="/about">About Us</Link>Variants
<Link variant="default" href="/">Default Link</Link>
<Link variant="underline" href="/">Underlined Link</Link>
<Link variant="subtle" href="/">Subtle Link</Link>External Links
<Link href="https://example.com" external>
External Link
</Link>With Icon
import { ExternalLinkIcon } from 'your-icon-library';
<Link href="https://example.com" external>
Visit Site <ExternalLinkIcon />
</Link>Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | required | Link URL |
variant | 'default' | 'underline' | 'subtle' | 'default' | Link style |
external | boolean | false | Open in new tab |
children | ReactNode | required | Link content |
className | string | - | Additional CSS classes |
Customization
<Link
href="/"
style={{
'--link-color': 'rgba(0, 100, 255, 1)',
'--link-color-hover': 'rgba(0, 80, 200, 1)',
'--link-text-decoration': 'none',
}}
>
Custom Link
</Link>Accessibility
- ✅ Semantic anchor tags
- ✅ Keyboard navigation
- ✅ Focus indicators
- ✅ External link indicators
Related Components
- Button - Action buttons
- Breadcrumb - Navigation breadcrumbs
