Link

The Link component styles anchors with the muted steel accent so navigation reads calm and operational. linkVariants is exported for composing the same styles onto router links such as next/link.

Import

import { Link, linkVariants } from '@nim-ui/components';

Variants

Escalated by Dana Reyes after the second failed retry.

See the runbook entry for manual settlement steps.

View all open exceptions

Code

// default — inline within body text
<Link href="/agents/dana">Dana Reyes</Link>

// subtle — quiet, underlined, inherits surrounding muted color
<Link href="/runbooks/settlement" variant="subtle">runbook entry</Link>

// standalone — nav items and "view all" affordances
<Link href="/exceptions" variant="standalone">View all open exceptions</Link>

External links

external opens the target in a new tab with rel="noopener noreferrer", an arrow icon, and a screen-reader note.

Delivery status is mirrored on the carrier's tracking page(opens in new tab).

Code

<Link href="https://example.com/status" external>
  tracking page
</Link>

With router links

Apply linkVariants to your framework's link component instead of nesting anchors.

import NextLink from 'next/link';
import { linkVariants } from '@nim-ui/components';

<NextLink href="/queues" className={linkVariants({ variant: 'standalone' })}>
  View all queues
</NextLink>

Props

Name	Type	Default	Description
`variant`	`'default' \| 'subtle' \| 'standalone'`	`'default'`	Visual style: inline accent, quiet underline, or standalone nav link
`external`	`boolean`	`false`	Open in a new tab with safe rel, external icon, and screen-reader note
`href*`	`string`	`-`	Link destination
`className`	`string`	`-`	Additional CSS classes to apply
`children*`	`ReactNode`	`-`	Link content

Accessibility

Renders a native <a> element with a visible focus indicator (focus-visible:outline-2).
external links announce "(opens in new tab)" to screen readers and mark the icon aria-hidden.
The subtle variant keeps a persistent underline so links remain distinguishable without relying on color alone.

Best Practices

Do

Use links for navigation and Button for actions
Use standalone for "View all" affordances and sidebar-adjacent navigation
Keep link text descriptive — "runbook entry", not "click here"

Don't

Use a Link styled as a button to submit forms or mutate data
Set target="_blank" manually — use external so rel safety comes along
Overuse the default accent inside dense tables; prefer subtle there

Breadcrumb - Hierarchical navigation trail
Button - For actions rather than navigation
SidebarNav - Primary workspace navigation

On this page