Link

A cross-platform React link component that provides accessible navigation with customizable styling. Supports external links with proper security attributes.

Installation

npm install @xsolla/xui-link
# or
yarn add @xsolla/xui-link

Demo

Basic Link

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function BasicLink() {
  return (
    <Link href="https://example.com">
      Visit Example
    </Link>
  );
}

With Click Handler

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function ClickableLink() {
  return (
    <Link onClick={() => console.log('Link clicked')}>
      Click me
    </Link>
  );
}

External Link

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function ExternalLink() {
  return (
    <Link
      href="https://external-site.com"
      target="_blank"
    >
      Open in new tab
    </Link>
  );
}

Underlined Link

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function UnderlinedLink() {
  return (
    <Link href="/about" underline={true}>
      About Us
    </Link>
  );
}

Anatomy

import { Link } from '@xsolla/xui-link';

<Link
  href="/path"               // Link URL
  onClick={handleClick}      // Click handler
  target="_blank"            // Link target
  rel="noopener"             // Link relationship
  size="md"                  // Size variant
  underline={false}          // Show underline
  disabled={false}           // Disabled state
  color="#007bff"            // Custom text color
>
  Link Text
</Link>

Examples

Link Sizes

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function LinkSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Link size="sm" href="#">Small Link</Link>
      <Link size="md" href="#">Medium Link</Link>
      <Link size="lg" href="#">Large Link</Link>
    </div>
  );
}

Disabled Link

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function DisabledLink() {
  return (
    <Link href="/disabled" disabled={true}>
      Disabled Link
    </Link>
  );
}

Custom Colored Link

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function ColoredLink() {
  return (
    <Link href="/custom" color="#ff6600">
      Custom Colored Link
    </Link>
  );
}

Inline Links

import * as React from 'react';
import { Link } from '@xsolla/xui-link';

export default function InlineLinks() {
  return (
    <p>
      Read our <Link href="/terms">Terms of Service</Link> and{' '}
      <Link href="/privacy">Privacy Policy</Link> for more information.
    </p>
  );
}

API Reference

Link

Link Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Required. Link content. | | href | string | - | Link URL. | | onClick | () => void | - | Click handler. | | target | string | - | Link target (e.g., "_blank"). | | rel | string | - | Link relationship attribute. | | size | "sm" \| "md" \| "lg" | "md" | Size variant. | | underline | boolean | false | Show text underline. | | disabled | boolean | false | Disabled state. | | color | string | Theme link color | Custom text color. | | testID | string | - | Test identifier. |

Behavior

• External links (target="_blank") automatically add rel="noopener noreferrer"
• Disabled links prevent navigation and show reduced cursor
• Click handler prevents default navigation when provided
• Hover state reduces opacity

Accessibility

• Uses native <a> element for semantic HTML
• role="link" explicitly set
• tabIndex="-1" when disabled
• Focus styles with visible outline
• Disabled links not focusable