Link — ARC UI

Components

Link

navigation

static

<arc-link>

Overview

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

Use Link as a button substitute — if the action does not navigate, use arc-button instead
Apply the muted variant to primary navigation links; they are too subtle for main wayfinding
Omit the external prop for cross-origin links — users expect the external icon and new-tab behavior
Nest block-level elements inside Link; it renders as inline by default
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 href="#">Default link</arc-link>
<arc-link href="#" variant="muted">Muted link</arc-link>
<arc-link href="#" variant="nav">Nav link</arc-link>

import { Link } from '@arclux/arc-ui-react';

<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: `
    <Link href="#">Default link</Link>
    <Link href="#" variant="muted">Muted link</Link>
    <Link href="#" variant="nav">Nav link</Link>
  `,
})
export class MyComponent {}

import { Link } from '@arclux/arc-ui-solid';

<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';

<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

Prop	Type	Default	Description
`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.
`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.
`underline`	`string`	`'hover'`	Controls underline behavior. Options: 'hover' (default, underline on hover), 'always' (always visible), 'never' (never underlined).

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight