Edit page

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:

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.

API

In addition to the options below, you can specify React synthetic events or any custom HTML attributes that do not interfere with the API, and they will be passed to the <a> HTML element. This enables making the component interactive and helps improve its accessibility.

Prop nameTypeDefaultRequiredDescription
hrefstringtrue

Link’s href attribute.

idstringundefinedfalse

ID of the root HTML element.

labelstringtrue

Link label.

Theming

Custom PropertyDescription
--rui-TextLink__colorText color
--rui-TextLink__text-decorationText decoration, e.g. underline
--rui-TextLink--hover__colorText color on hover
--rui-TextLink--hover__text-decorationText decoration on hover