Link
Basic Usage
The simplest way to display links
<Link href="/about">About Us</Link>External Links
Links to external websites, automatically adding the open-in-new-window attribute
<Link href="https://example.com" external>Visit External Website</Link>Style Variants
Apply different style variants using the variant property
<Link href="/signup" variant="primary">Primary Link</Link>
<Link href="/learn-more" variant="secondary">Secondary Link</Link>
<Link href="/docs" variant="text">Text Link</Link>
<Link href="/get-started" variant="cta">Call to Action</Link>
<Link href="/preview" variant="ghost">Ghost Link</Link>Block Display
Make links occupy the entire row using the block property
Full-width Link
This is a paragraph that contains an inline link .
<Link href="/contact" block variant="primary">Full-width Link</Link>
<p class="cosy:mt-2">This is a paragraph that contains an <Link href="/inline">inline link</Link>.</p>Animation Effects
Add hover animation effects using the animation property
<Link href="/contact" animation="hover-lift" variant="primary">Lift Effect</Link>
<Link href="/features" animation="hover-glow" variant="secondary">Glow Effect</Link>
<Link href="/pricing" animation="hover-scale" variant="cta">Scale Effect</Link>Size Variants
Control the size of links using the size property
<Link href="/small" size="sm">Small Link</Link>
<Link href="/medium" size="md">Medium Link</Link>
<Link href="/large" size="lg">Large Link</Link>Centered Text
Center the link text using the centerText property
<Link href="/centered" block centerText variant="primary">Centered Link Text</Link>Debug Mode
Display link boundaries using the debug property for easier development debugging
<Link href="/debug" debug>Link with Visible Boundaries</Link>