Link

A styled anchor component for navigation with variant and colour options.

Anatomy

<script>
  import { Link } from "@saas-ui/svelte/components/link";
</script>

<Link href="/about" variant="underline" colour="blue">
  Learn more
</Link>

Examples

Basic Accessibility

Basic Link component for navigation.

<Link href="#">Visit Chakra UI</Link>

Colours Accessibility

Use the colour prop to change the colour of the Link.

<VStack gap={4}>
	{#each colours as colour}
		<HStack align="center" gap={4}>
			<Text as="span" size="xs" class="text-fg-muted w-16"
				>{colour}</Text>
			<Link href="#" variant="underline" {colour}
				>Link ({colour})</Link>
			<Link href="#" variant="plain" {colour}>Plain</Link>
		</HStack>
	{/each}
</VStack>

External Accessibility

Add an external link icon to the Link component.

<Link href="#" variant="plain">
	Visit Chakra UI
	<Icon as={ArrowSquareOut} size="xs" />
</Link>

Variants Accessibility

Use the variant prop to change the appearance of the Link component.

<VStack gap={2} class="items-center">
	<Link href="#" variant="underline">Link (Underline)</Link>
	<Link href="#" variant="plain">Link (Plain)</Link>
</VStack>

Within Text Accessibility

Use Link within text to create a hyperlink.

<Text>
	Visit the <Link
		href="https://chakra-ui.com"
		colour="teal"
		variant="underline">Chakra UI</Link> website
</Text>

Props

Prop	Type	Default	Description
`variant`	`underline \| plain`	`plain`	The visual style of the component.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`gray`	The colour theme of the component.
`href`	`text`	-	-
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.