Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Link

Styled anchor with nav, muted, and default variants.

Components Link
navigation static
<arc-link>

Overview

Link wraps a native `<a>` element with consistent styling across three variants. The default variant renders in the accent-primary color with an underline-on-hover behavior. The "muted" variant starts in the muted text color and transitions to primary on hover, useful for footer links or secondary navigation. The "nav" variant renders at 14px with an inline-flex layout and gap, designed for navigation menus where links sit alongside icons. When the `external` property is set, Link automatically appends a small external-link SVG icon, sets `target="_blank"`, and applies `rel="noopener noreferrer"` for security. This eliminates the need to manually manage external link attributes across your application. The icon renders at 12px with 60% opacity to avoid visual clutter. The `active` boolean property highlights the current link in accent-primary, useful for indicating the active page in navigation contexts. All variants include a focus-visible ring using the system's `--focus-ring` token, ensuring keyboard navigation is clearly visible without affecting mouse users.

Guidelines

When to use

  • Use the default variant for inline content links within body text
  • Use the nav variant for navigation menus, sidebars, and header link groups
  • Set the external prop for any link that navigates away from your domain
  • Use the active prop to indicate the current page in navigation link lists
  • Provide meaningful link text that describes the destination, not "click here"

When not to use

  • Do not use Link as a button substitute — if the action does not navigate, use arc-button instead
  • Do not apply the muted variant to primary navigation links; they are too subtle for main wayfinding
  • Do not omit the external prop for cross-origin links — users expect the external icon and new-tab behavior
  • Do not nest block-level elements inside Link; it renders as inline by default
  • Do not override the focus-visible ring without providing an equivalent alternative for keyboard users

Features

  • Three variants: default (accent blue), muted (subtle with hover reveal), and nav (compact navigation style)
  • Automatic external link handling with target="_blank", rel="noopener noreferrer", and an external icon
  • Active state via the "active" boolean property for current-page indication
  • Focus-visible ring using the system focus-ring token for keyboard accessibility
  • Smooth color transitions using `--transition-fast` for hover and focus states
  • Inline external-link SVG icon at 12px with reduced opacity to avoid clutter
  • Exposed "link" CSS part for external style customization

Preview

Default link Muted link Nav link Active nav External link

Usage

<arc-link><a href="#">Default link</a></arc-link>
<arc-link variant="muted"><a href="#">Muted link</a></arc-link>
<arc-link variant="nav"><a href="#">Nav link</a></arc-link>
 
import { Link } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Link href="#">Default link</Link>
      <Link href="#" variant="muted">Muted link</Link>
      <Link href="#" variant="nav">Nav link</Link>
    </>
  );
}
 
<script setup>
import { Link } from '@arclux/arc-ui-vue';
</script>

<template>
  <Link href="#">Default link</Link>
  <Link href="#" variant="muted">Muted link</Link>
  <Link href="#" variant="nav">Nav link</Link>
</template>
 
<script>
  import { Link } from '@arclux/arc-ui-svelte';
</script>

<Link href="#">Default link</Link>
<Link href="#" variant="muted">Muted link</Link>
<Link href="#" variant="nav">Nav link</Link>
 
import { Component } from '@angular/core';
import { Link } from '@arclux/arc-ui-angular';

@Component({
  imports: [Link],
  template: `
    <arc-link><a href="#">Default link</a></arc-link>
    <arc-link variant="muted"><a href="#">Muted link</a></arc-link>
    <arc-link variant="nav"><a href="#">Nav link</a></arc-link>
  `,
})
export class MyComponent {}
 
import { Link } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Link href="#">Default link</Link>
      <Link href="#" variant="muted">Muted link</Link>
      <Link href="#" variant="nav">Nav link</Link>
    </>
  );
}
 
import { Link } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Link href="#">Default link</Link>
      <Link href="#" variant="muted">Muted link</Link>
      <Link href="#" variant="nav">Nav link</Link>
    </>
  );
}
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-link — requires link.css + base.css (or arc-ui.css) -->
<span class="arc-link">
  <a
   class="link"
   href="#"
   target=""
   rel=""
   >
   Link
   External
   </a>
</span>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-link — self-contained, no external CSS needed -->
<style>
  .arc-link .link:hover { text-decoration: underline;
        text-underline-offset: 3px; }
  .arc-link[data-variant="muted"] .link:hover { color: rgb(232, 232, 236); }
  .arc-link[data-variant="nav"] .link:hover { color: rgb(232, 232, 236);
        text-decoration: none; }
  .arc-link .link:focus-visible { outline: none;
        box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247);
        border-radius: 2px; }
</style>
<span class="arc-link" style="display: inline">
  <a
   class="link" style="font-family: 'Host Grotesk', system-ui, sans-serif; font-size: inherit; color: rgb(77, 126, 247); text-decoration: none; cursor: pointer; border: none; background: none; padding: 0"
   href="#"
   target=""
   rel=""
   >
   Link
   External
   </a>
</span>

API

href string ''
URL destination for the link.
variant 'default' | 'muted' | 'nav' 'default'
Link style variant. `default` uses accent-primary color, `muted` uses muted text, `nav` uses secondary text with 14px size and flex layout.
underline 'hover' | 'always' | 'never' 'hover'
Controls underline behavior: 'hover' underlines on hover, 'always' keeps it visible, 'never' omits it.
active boolean false
Active state — applies accent-primary color for navigation highlighting.
external boolean false
When true, adds `target="_blank"` and `rel="noopener noreferrer"`, and renders an external link icon after the text.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy