TextLink

A link inside a sentence.

Your trial ends in 3 days. Add a payment method in billing settings to keep scanning.

1<template>2  <p>3    Add a payment method in <TextLink to="/billing">billing settings</TextLink> to keep scanning.4  </p>5</template>

Props

Name	Type	Default
to	RouteLocationRaw	-
target	string	-
...props	NuxtLink props (external, ...)	-

Slots

Name	Description
default	The link text.

Guidelines

Do

Use it for a link that sits inside running text - a sentence, a banner message, a form hint, an i18n string with a link slot.
Pass to for both in-app routes and external URLs (https://, mailto:). Add target="_blank" for an external page that opens in a new tab: it adds the arrow after the text, sized to the sentence, and visually hidden "(opens in new tab)" text for screen readers.
Always pass to: a link only navigates. An action, including a Banner or Alert call-to-action that opens a modal, is a Button (in an Alert, its #actions slot). Without to, TextLink falls back to a <button> and warns in dev.

Use it as-is inside a Banner or Alert - the container sets its resting color (see the list below). Hover is the same everywhere.
Keep the link text to the words that describe the destination ("billing settings"), not the whole sentence.

Don't

Don't use it for a standalone action or a "View all" link sitting on its own - use Button variant="plain" (card-header actions, metadata and ticket/PR links), which carries label typography and a tertiary-to-primary hover.
Don't add a size, weight, or color class - it takes its size and weight from the surrounding text, and its color is set by where it sits (see the list below).
Don't use it for a link in a table cell - use createLinkColumn / createRowLinkColumn, or <LinkCell :href> / <LinkCell :to> inside a custom cell slot.

Don't put the link text on its own line inside the tag - Vue keeps a space at each end of the text, and the underline runs under both. Keep <TextLink to="...">text</TextLink> on one line (eslint is configured not to break it apart).
Don't use it for a file download from a static asset path without external - NuxtLink otherwise treats the path as an app route.

Components that change its color

Inside these, a TextLink rests in the container's own text color instead of link blue. Hover still goes to text-primary.

Component	Variants	Resting link color
Banner	`warning`, `error` (all)	Banner's text color
Alert	`success`, `warning`, `error`	Alert's text color
Alert	`default`	Link blue (unchanged)

Everywhere else, TextLink rests in link blue.

Link styling (blue) means "this takes you somewhere", so it is reserved for navigation that reads as content. The full rule, with examples, is on the Links and buttons pattern page.

What it is	Element	Use
Navigation inside a sentence	`<a>`	`TextLink`
A standalone reference (a docs link)	`<a>`	`Button variant="link"` with `to`
UI-chrome navigation ("View all", "Configure", metadata, ticket/PR links)	`<a>`	`Button variant="plain"` with `to`, or the component's own link (`LinkCell`, row links, `LinkCard`)
An action (open a modal, resend, switch a step, select all)	`<button>`	`Button variant="plain"` (or another button variant) - never link-styled
A Banner/Alert call-to-action that navigates	`<a>`	`TextLink` with `to` (an action there is a `Button`)

Examples

In a banner

Rests in the banner's own warning/error color instead of link blue. Hover is unchanged.

Your trial ends in 3 days. Add a payment method

1<template>2  <Banner color="warning">3    Your trial ends in 3 days.4    <TextLink to="/billing">Add a payment method</TextLink>5  </Banner>6</template>

In an alert

Rests in the alert's own color in a success, warning, or error Alert. A default Alert keeps link blue.

Payment failed

We couldn't charge your card. Update payment method

1<template>2  <Alert variant="error" title="Payment failed">3    <template #description>4      We couldn't charge your card.5      <TextLink to="/billing">Update payment method</TextLink>6    </template>7  </Alert>8</template>