Link | tcpsystems/ui

Try it

Svelte

<Link href="/settings" variant="quiet">Manage team settings</Link>

Examples

Basic

Back to dashboard

Basic.svelte

<script lang="ts">
	import Link from '@tcpsystems/ui/foundation/Link';
</script>

<Link href="/">Back to dashboard</Link>

External

Open console View source on GitHub

External.svelte

<script lang="ts">
	import Link from '@tcpsystems/ui/foundation/Link';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack gap="sm">
	<Link href="https://console.tcp.systems" external>Open console</Link>
	<Link href="https://github.com/tcpsystems/acumen" external>View source on GitHub</Link>
</Stack>

Variant

View deployments Integration guide

Variant.svelte

<script lang="ts">
	import Link from '@tcpsystems/ui/foundation/Link';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack gap="sm">
	<Link href="/dashboard" variant="quiet">View deployments</Link>
	<Link href="/start" variant="quiet">Integration guide</Link>
</Stack>

With children

Manage team settings →

With children.svelte

<script lang="ts">
	import Link from '@tcpsystems/ui/foundation/Link';
</script>

<Link href="/settings" variant="quiet">
	Manage team settings →
</Link>

API

Import

import Link from '@tcpsystems/ui/foundation/Link';

Prop	Type	Default
`variant?`	`'quiet'`	none
`external?`	`boolean`	`false`
`children?`	`native`	none

Hook	Kind
`.tcp-link`	Root class
`data-variant`	Data attribute