HyLink

A versatile link component that provides enhanced styling and functionality over standard anchor tags. Supports multiple visual variants, size options, disabled states, comprehensive accessibility features, form integration, and flexible content slots. Optimized for performance with hardware acceleration and includes full keyboard navigation, screen reader support, responsive design capabilities, high contrast mode support, reduced motion preferences, and print-friendly styling.

Features

• Multiple variants (default, emphasis, navigation) and sizes (small, medium, large)
• Conditional gap spacing - gaps only appear between prefix/suffix content for default and emphasis variants
• Enhanced accessibility with ARIA support, high contrast mode, reduced motion, and screen reader announcements
• Form integration with validation and comprehensive error handling
• Container queries for responsive behavior
• Dark mode and high contrast support with automatic color adjustments
• Performance optimized with hardware acceleration and CSS transforms
• Touch-friendly targets on mobile devices
• Print-friendly styles with URL display for external links

Examples

Basic usage

<hy-link href="/about" label="About Us"></hy-link>

Different sizes and variants

<hy-link href="/profile" variant="emphasis" size="large"> Large Emphasis Link </hy-link>
<hy-link href="/settings" size="small">Small Link</hy-link>

Navigation variant with bottom border indicator

<hy-link href="/home" variant="navigation">Home</hy-link>
<hy-link href="/about" variant="navigation" selected>About</hy-link>

With slots for icons (automatic gap spacing)

<hy-link href="/profile" variant="emphasis">
  <hy-icon name="user" slot="prefix"></hy-icon>
  User Profile
  <hy-icon name="arrow-right" slot="suffix"></hy-icon>
</hy-link>

Form submission with validation

External link with accessibility

<hy-link
  href="https://example.com"
  target="_blank"
  variant="emphasis"
  aria-label="Visit Example.com (opens in new window)"
>
  External Link
  <hy-icon name="external-link" slot="suffix"></hy-icon>
</hy-link>

Disabled and selected states

<hy-link href="/current" selected>Current Page</hy-link>
<hy-link href="/disabled" disabled>Disabled Link</hy-link>

Events

• focus - Fired when the link receives focus
• blur - Fired when the link loses focus
• form-submit - Fired when form submission is triggered (cancelable)
• validation-error - Fired when form validation fails
• form-error - Fired when form submission encounters an error

Slots

• default - The default slot for link text content (alternative to label property)
• prefix - Content to show before the link text (icons, badges, etc.). Creates automatic gap spacing for default and emphasis variants.
• suffix - Content to show after the link text (icons, arrows, etc.). Creates automatic gap spacing for default and emphasis variants.

Methods

willUpdate()

Reflects computed has-gap state as a host attribute so CSS can target it with :host([has-gap]) selectors. Guarded by !isServer — the host SSR framework sets the attr during initial render.

click()

Simulates a click on the link. Respects disabled state.

const link = document.querySelector('hy-link');
if (!link.disabled) {
  link.click(); // Programmatically trigger the link
}

focus()

Sets focus on the link. Automatically skipped if disabled.

Parameters:

• options - Optional focus options (preventScroll, etc.)

const link = document.querySelector('hy-link');
link.focus({ preventScroll: true });

blur()

Removes focus from the link.

const link = document.querySelector('hy-link');
link.blur();