Link

An accessible inline link. Renders an <a> element with theme-aware colour, optional underline, and automatic security attributes for external targets.

Installation

npm install @xsolla/xui-link

Imports

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

Quick start

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

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

API Reference

<Link>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | children | ReactNode | - | Link content. | | href | string | - | Destination URL. Cleared when disabled. | | onClick | () => void | - | Click handler. When provided, preventDefault() is called before invoking — browser navigation via href is suppressed, so handle navigation yourself (e.g. router push). href remains on the <a> for right-click and assistive tech. | | target | string | - | Anchor target (e.g. '_blank'). When '_blank', rel="noopener noreferrer" is added automatically and merged with any caller-supplied rel. | | rel | string | - | Additional rel tokens. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Font size preset (12/14/16px). | | underline | boolean | false | Underline the text. | | disabled | boolean | false | Removes href, sets tabIndex={-1}, and shows not-allowed cursor. | | color | string | theme control.link.primary | Custom text colour (ignored when disabled). | | testID | string | - | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Examples

Sizes

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

export default function Example() {
  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>
  );
}

External link

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

export default function Example() {
  return (
    <Link href="https://example.com" target="_blank">
      Open in a new tab
    </Link>
  );
}

Underlined inline link

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

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

Disabled

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

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

Accessibility

• Renders a native <a> with explicit role="link".
• Disabled links lose their href and become unfocusable (tabIndex={-1}).
• Visible focus ring uses the theme's brand border colour.
• For target="_blank", rel="noopener noreferrer" is enforced automatically.
• Use descriptive link text — avoid generic phrases like "click here".