TextLink
An inline link inside prose. Locale-aware for internal routes, and the only link component that belongs in the middle of a sentence.
import TextLink from '@/components/ui/TextLink';Source: src/components/ui/TextLink.tsx
Examples
Underline policy
hover by default. always for a link inside a paragraph, where the underline is the only thing marking it as a link. none only when the surrounding layout already makes it obvious.
Read our terms of service before withdrawing.
Sizes and weight
External
An absolute URL, mailto: or tel: opens in a new tab with rel="noopener". Nothing to configure — it is decided from the href.
Props
<TextLink> props
| Prop | Type | Default | Description |
|---|---|---|---|
href | InternalHref | string | — | Internal route (locale-aware, typed) or an external URL/mailto/tel string. Omit it (with an onClick) for a link-styled <button> — for actions whose destination isn't known until they run. |
size | 'sm' | 'md' | 'lg' | 'md' | — |
bold | boolean | false | — |
italic | boolean | false | — |
underline | 'always' | 'hover' | 'none' | 'hover' | See UNDERLINE above. Defaults to `hover`. |
className | string | '' | — |
onClick | React.MouseEventHandler<HTMLElement> | — | — |
disabled | boolean | — | Button mode only — link renders ignore it. |
Also accepts everything in Omit<ComponentProps<typeof Link>, 'href' | 'className' | 'onClick'> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Use it for navigation inside text, and Button href for navigation that is a call to action.
- Make the link text describe the destination — “terms of service”, never “click here”.
Don’t
- Don’t import next/link. It skips locale-aware routing and translated pathnames; ESLint blocks it.
- Don’t style a Button to look like a link — that is what this is.