Link

Import
import { Link } from "reshaped";
import type { LinkProps } from "reshaped";
Related components
Storybook
Supports multiline display within the text

Dynamically adjusts to the parent element typography and color styles

Automatically resolves to correct HTML tag


Usage

Since links are usually used for the navigation inside the text, Button is a better alternative for standalone actions.

Link can be rendered by passing children to it. It respects the line breaks, so its content can start on one line and end on the next one without breaking the text flow.

Link works with both href and onClick properties. Using either of them will resolve Link rendering to <a> or <button> tag respectively.

If you use Link for client-side routing, make sure to pass href property to it together with onClick. That will render Link using a correct HTML tag keeping native behavior working like expected. For instance, users can open navigation links using Link component in a new tab.

We recommend using underline Links to differentiate it from the rest of the text visually, and that's the default variant we provide. However, it's also possible to remove the underline for the use cases where keeping it produces too much visual noise.

Links are primarily used as pure text elements and support rendering inside multiline text. For the cases when you use them as standalone elements, you can also add an icon to it. If the line breaks in the middle of the link content, the whole link will move to the next line.

Colors

Link supports primary and critical colors, as well as inherit color that will use the color value used by the parent component.

States

Links used as buttons can be disabled for the user interaction with the disabled flag.

Accessibility

  • Link click event triggers on both Space and Enter keypress.