Navigation link component with Next.js routing.
| Name | Type | Default | Description |
|---|---|---|---|
| hrefrequired | string | — | Link destination |
| variant | "default" | "primary" | "ghost" | "nav" | default | Visual style variant |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Font Weight | fontWeight.medium | 500 | Medium weight for inline links | |
| Text | color.primary | var(--primary) | Primary link color | |
| Hover Text | color.primary/80 | var(--primary)/80% | Dimmed on hover | |
| Text Decoration | underline-offset-4 | underline-offset: 4px | Underline on hover |
Different link styles for various contexts and use cases.
<Link variant="default" href="/docs">Default link</Link> <Link variant="primary" href="/signup">Primary link</Link> <Link variant="ghost" href="/settings">Ghost link</Link> <Link variant="nav" href="/home">Nav link</Link>
Default variant for links within body text.
This is a paragraph with an inline link that uses the default variant. Use this for links within body text.
<p>
This is a paragraph with an{' '}
<Link variant="default" href="/docs">inline link</Link>{' '}
that uses the default variant.
</p>Nav variant for navigation menus with dimmed default state.
<nav className="flex gap-2"> <Link variant="nav" href="/home">Home</Link> <Link variant="nav" href="/projects">Projects</Link> <Link variant="nav" href="/team">Team</Link> <Link variant="nav" href="/settings">Settings</Link> </nav>
External links should indicate they open in a new window.
Check out the GitHub repository ↗
<Link variant="default" href="https://github.com" target="_blank" rel="noopener noreferrer" > GitHub repository ↗ </Link>