Link

Accessible navigation links for internal and external destinations.

Installation

Import

import { Link } from '@svelte-atoms/core/link';

Preset Configuration

Customize the link appearance using presets

You can customize the default styles for Link components by defining presets in your configuration:

Examples

Explore different link variations

Basic Link

Simple internal link

Documentation

Code

<Link href="/about">About Us</Link>

External Link

Link to external website

Visit GitHub →

Code

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</Link>

Link Variants

Different link styles

Default Link Muted Link Underlined Link

Code

<Link variant="default">Default Link</Link>
<Link variant="muted">Muted Link</Link>
<Link variant="underline">Underlined Link</Link>

Link Sizes

Different link sizes

Small Medium Large

Code

<Link size="sm">Small Link</Link>
<Link size="md">Medium Link</Link>
<Link size="lg">Large Link</Link>

API Reference

Link Props

Prop

Type

Default

Description

href

string

'#'

Link destination

variant

'default' | 'muted' | 'underline'

'default'

Link style

size

'sm' | 'md' | 'lg'

'md'

Link size

target

string

Link target (_blank, etc.)

rel

string

Link relationship

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

• Use meaningful link text
• Add rel="noopener noreferrer" for external links
• Ensure sufficient color contrast
• Make focused links clearly visible
• Screen reader friendly navigation

Label

List