Components
Link
Styled anchor elements for navigation with support for icons and multiple variants.
Installation
Usage
import { Link } from "@/registry/core/link";
export default () => <Link href="/about">Learn more</Link>;Examples
Variants
<Link variant="primary" href="/docs">
Primary Link
</Link>
<Link variant="dark" href="/blog">
Dark Link
</Link>Sizes
<Link size="sm" href="/help">
Small Link
</Link>
<Link size="md" href="/contact">
Medium Link
</Link>External Link
<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
Visit Website
</Link>API Reference
Link
Extends a element props.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Link destination (required) |
variant | 'primary', 'dark' | 'dark' | Visual style variant |
size | 'sm', 'md' | 'sm' | Link size |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Link content |
target | string | - | Link target (e.g., _blank) |
rel | string | - | Link relationship |
Accessibility
- Uses semantic
<a>elements for proper navigation - Supports all standard anchor attributes including
targetandrel - Keyboard accessible with standard link behavior
- Hover states provide clear visual feedback
- Icons inherit text color for consistent styling
Notes
- Icons are automatically sized to
20px(1.25rem) via the[&>svg]:size-5class - The component uses
inline-flexfor proper icon alignment with text - Smooth color transitions on hover for better UX
- Works with any routing library by passing custom
hrefprops - All standard anchor HTML attributes are supported