Link Text
An inline text link with tone, underline, and size variants plus safe external link handling.
Loading preview…
1<script lang="ts">
2 import LinkText from './link-text.svelte';
3</script>
4
5<div class="flex items-center gap-4">
6 <LinkText href="#">Internal link</LinkText>
7 <LinkText href="https://example.com" external tone="muted">External link</LinkText>
8</div>
9Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/link-text/link-text.svelte
- ~/components/link-text/link-text.types.ts
- ~/components/link-text/link-text.variants.ts
Usage
Use link text for inline navigation inside copy. Setting external opens the link in a new tab and
adds rel="noopener noreferrer".
1<script lang="ts">
2 import LinkText from '~/components/link-text/link-text.svelte';
3</script>
4
5<LinkText href="/pricing">See pricing</LinkText>
6<LinkText href="https://example.com" external tone="muted">Read the docs</LinkText>