Text Link
Text link for inline internal and external links with router integration, color inheritance, underline control, and weight options.
import { TextLink } from "@plexui/vue/components/TextLink";Examples
Overview
Inline usage
Default inheritance
Primary color
Underline
External links
Font weight
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode[] | — | Link content |
href | string | — | URL. An http:// or https:// URL is external |
to | string | Record<string, unknown> | — | Router link destination (internal), such as a vue-router location |
primary | boolean | false | Primary color, no default underline |
underline | boolean | true | Underline (default true unless primary) |
force-external | boolean | — | Force external link behavior |
as | Component | — | Link component (e.g. RouterLink, NuxtLink) |
target | string | — | Where to open the link. External links default to _blank |
class | 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 a @click listener it takes Tab and runs on Enter or Space. Other attributes and listeners 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 a component-level override. A link component that declares a to prop, such as vue-router's RouterLink or NuxtLink, receives href as to when no to is given, so <TextLink href="/help"> works with either.
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router"
import { PlexUIProvider } from "@plexui/vue/components/PlexUIProvider"
</script>
<template>
<PlexUIProvider :link-component="RouterLink">
<RouterView />
</PlexUIProvider>
</template><TextLink to="/help">Get Help</TextLink>
<TextLink :as="NuxtLink" to="/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)