Link

Link is the navigational text action component for inline and standalone navigation affordances.

Overview

Link styling is concentrated in one text-level surface with color, underline, underline offset, and focus behavior.

Public CSS Variables

Variable	Value	Affects
Focus outline color.`Link`		No visible change in this state
Hover and focus transition timing.`Link`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Link: owns color, underline, underline offset, hover, and focus styling.

State And Variant Interaction

Hover changes color and underline offset.
Focus-visible adds an outline.
asChild preserves the same styling while delegating rendering.

Examples

Link sets its color directly rather than through a variable, so an inline color replaces it in every state, hover included. Here footer links are muted while the underline offset still animates on hover.

LTRRTL

css-overrides.tsx · 18 lines

import type { CSSProperties } from 'react';
import { Link } from '@vega-ui/react';

const muted: CSSProperties = {
  color: 'var(--label-secondary)',
  textDecorationColor: 'var(--separator-opaque)',
};

export default function CssOverrides() {
  return (
    <footer style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-4) var(--spacing-10)', fontSize: 'var(--font-size-2)' }}>
      <span style={{ color: 'var(--label-secondary)' }}>© 2025 Acme Inc.</span>

Do Not Override

Do not remove focus visibility without a replacement.
Do not suppress underline or hover feedback until the element stops reading like a link.
Do not use link styling as a substitute for button semantics.