Link

A link inside running text.

Your trial ends in 3 days. Choose a plan to keep your projects.

<Text color="secondary">  Your trial ends in 3 days. <Link href="#billing">Choose a plan</Link> to keep  your projects.</Text>

Installation

$ npx shadcn@latest add @constella/link

import { Link } from "@/components/typography/link";

<Link href="/billing">Choose a plan</Link>

Pass your router's link as render. It keeps its navigation; Link adds the look.

import { Link as RouterLink } from "@tanstack/react-router";
<Link render={<RouterLink to="/billing" />}>Choose a plan</Link>;

For a link that looks like a button, use buttonStyles from Button.

Prop	Type	Default
`render`	`ReactElement \| function`	`<a>`
`sx`	`Sx`, applied last	-