Link
An accessible link component that supports both navigation and press-event patterns. Normalizes mouse, touch, and keyboard interactions.
Import
import { Link } from '@proyecto-viviana/solid-spectrum';Basic Usage
Standard navigation link.
<Link href="https://example.com" target="_blank">External Link</Link>Variants
Two visual variants for different contexts.
PrimarySecondary
<Link variant="primary">Primary</Link>
<Link variant="secondary">Secondary</Link>With onPress
Use onPress for client-side navigation or actions without an href.
Client-side Action
<Link onPress={() => console.log('Link pressed')}>
Client-side Action
</Link>Current Page
Mark the current page link for navigation landmarks.
<Link href="/current" aria-current="page">Current Page</Link>Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | URL to navigate to (renders as <a>) |
target | string | — | Link target (_blank, _self, etc.) |
variant | 'primary' | 'secondary' | 'primary' | Visual style |
staticColor | 'auto' | 'black' | 'white' | — | Static color treatment for colored backgrounds |
isStandalone | boolean | false | Applies standalone typography |
isQuiet | boolean | false | Removes the standalone underline until hover or keyboard focus |
onPress | (e: PressEvent) => void | — | Press handler (normalizes mouse/touch/keyboard) |
aria-current | string | — | Marks current page/step/location |
children | JSX.Element | — | Link content |
Accessibility
- Renders as native
<a>when href is provided - Enter key activates links in all cases
- Press events normalized across mouse, touch, and keyboard interactions