Text Link
Text link for inline internal and external links with router integration, color inheritance, underline control, and weight options.
import { TextLink } from "@plexui/ui/components/TextLink";Examples
Overview
Inline usage
You can use the responses endpoint to generate text. You can either use the API directly from an HTTP client of your choice, or use one of the official SDKs for your preferred language.
Default inheritance
You can use the responses endpoint to generate text. You can either use the API directly from an HTTP client of your choice, or use one of the official SDKs for your preferred language.
Primary color
Sample text with a primary link
Underline
Sample text with a subtle link
External links
Font weight
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Link content |
href | string | — | URL. An http:// or https:// URL is external |
to | string | object | — | Router link destination (internal); its type comes from the link component |
primary | boolean | false | Primary color, no default underline |
underline | boolean | true | Underline (default true unless primary) |
forceExternal | boolean | — | Force external link behavior |
as | Component | — | Link component (e.g. Next Link) |
target | string | — | Where to open the link. External links default to _blank |
className | string | — | Extra classes on the link |
External links render an <a> with target="_blank" (unless you pass target) and rel="noopener noreferrer". Without href or to, TextLink renders a <span role="button">; with an onClick it takes Tab and runs on Enter or Space. Other anchor attributes are forwarded.
Configure your Router
Wrap your app in PlexUIProvider and pass your router's Link component. You can also pass the Link component to the as prop on TextLink for component-level override.
import { PlexUIProvider } from "@plexui/ui/components/PlexUIProvider"
import { Link } from "react-router"
export function App() {
return (
<PlexUIProvider linkComponent={Link}>
...
</PlexUIProvider>
)
}
<TextLink to={{ pathname: "/help" }} prefetch="intent">Get Help</TextLink>import Link from "next/link"
<TextLink as={Link} href="/dashboard">View Dashboard</TextLink>Styling
Text Link reads these component tokens. Override them at any scope to restyle it:
--link-font-weight: font weight (defaultinherit)--link-gap: gap (defaultspacing(0.5))--link-primary-text-color: primary text color (defaultlight-dark(var(--blue-500), var(--blue-300)))--link-primary-text-color-hover: primary text color hover (defaultlight-dark(var(--blue-600), var(--blue-400)))--link-radius: radius (defaultvar(--radius-sm))--link-underline-decoration-offset: underline decoration offset (default0.1em)