Core UI

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

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

External Link

Link to external website

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

Link Variants

Different link styles

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

Link Sizes

Different link sizes

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
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

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
Previous
Label
Next
List