TextLink

TextLink allows users to follow navigation.

Basic Usage

To implement the TextLink component, you need to import it first:

import { TextLink } from '@react-ui-org/react-ui';

And use it:

<TextLink
  href="/docs/contribute/general-guidelines"
  label="How can I contribute to React UI?"
/>

See API for all available options.

General Guidelines

Avoid using links for actions, use a Button instead. This is because users expect navigation to happen when clicking on something what looks like a link.

Custom Routing

It's common to use custom function for routing within SPAs. Use the onClick option to provide such function.

<TextLink
  href="/docs/contribute/general-guidelines"
  label="This link is controlled by custom function"
  onClick={(event) => {
    event.preventDefault();
    alert('You will be redirected.')
    window.location = event.currentTarget.getAttribute('href');
  }}
/>

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify any HTML attribute you like. All attributes that don't interfere with the API of the React component and that aren't filtered out by transferProps helper are forwarded to the root <a> HTML element. This enables making the component interactive and helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

• <a> HTML element attributes
• React common props

API

Theming

ℹ️ The TextLink component is context-aware and can inherit text color from its parent component. This applies for components using Feedback color collection and for components in any of the supported validation states. In such cases, the custom properties marked with an asterisk (*) are ignored.

Custom Property	Description
--rui-TextLink__color *	Text color
--rui-TextLink__text-decoration	Text decoration, e.g. underline
--rui-TextLink--hover__color *	Text color on hover
--rui-TextLink--hover__text-decoration	Text decoration on hover
--rui-TextLink--active__color *	Text color in the active state
--rui-TextLink--active__text-decoration	Text decoration in the active state