Text Link
Semantic link for internal and external links
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
colorClassName
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
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Link content |
href | string | — | URL |
to | object | — | Router link destination (internal) |
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) |
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>