StorybookGitHub

Link Text

A styled, polymorphic text link with tone, underline, and size variants.

By continuing, you agree to our Terms of Service and Privacy Policy.

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/link-text.json

Usage

Use LinkText for inline text links that need consistent tone and underline treatment across the app, such as body copy links or footer navigation. It renders an <a> by default but accepts as-child to delegate rendering to another element (e.g. a router link).

<script setup lang="ts">
import { LinkText } from "@/components/ui/link-text";
</script>

<template>
  <p>
    Read our
    <LinkText href="/docs" tone="default" underline="hover">documentation</LinkText>
    to get started.
  </p>
</template>