Text Link

A link for running text, with a faint underline that darkens on hover, in default and muted tones. Renders as a framework link or a button.

shadcn Base UIUsed in 9 blocks

Installation

npx shadcn@4.19.0 add https://ui.edbn.me/r/text-link.json

Source

Usage

text-link-basic.tsx

19 lines

"use client";
import { TextLink } from "@/components/ui/text-link";

export default function TextLinkBasicPreview() {
  return (
    <div className="flex max-w-compact flex-col gap-3">
      <p>
        Read the <TextLink href="#">migration guide</TextLink> before you
        upgrade.
      </p>
      <p className="text-muted-foreground">
        File moved to Archive.{" "}
        <TextLink variant="muted" render={<button />}>
          Undo
        </TextLink>
      </p>
    </div>
  );
}

Used in blocks

Status timeline
Resend code button
Subscribe input
Announcement banner
Cookie consent with preferences
Tool call card
Tool approval card
Agent run trace
Answer with inline citations