Link

AtomThrive, no shadcn equivalent

Text that takes you somewhere. Next's client-side Link, painted with the link token.

components/atoms/link.tsx

Use it for: Navigation inside a sentence or a list — footer links, 'read more', a route in the app.
Not for: Doing something on this page. That is a Button.

States

DefaultHover it

Always underlined

Focused

External

Usage

import { Link } from '@/components/atoms/link';

<Link href="/signin">Sign in</Link>
<Link href="https://thrive.example/terms" external underline="always">
  Terms and Conditions
</Link>

Props

Link props
Prop	Type	Default	Description
href	string \| UrlObject	—	Where it goes. Required.
underline	'hover' \| 'always'	'hover'	Always-underlined reads better inside running text, where colour alone is not enough.
external	boolean	false	Opens a new tab with rel="noopener noreferrer", and says so to screen readers.
...rest	ComponentProps<typeof NextLink>	—	prefetch, replace, scroll, ref, aria-* and the rest.

Accessibility

Reached with Tab, followed with Enter.
An external link is announced with “(opens in a new tab)”.