Link
A link takes people to a new location in the app or another website.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Link } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| href * | string | None | Where the link goes. If there is no destination, use a button. |
| appearance | 'default' | 'subtle' | 'default' | Subtle removes the colour, for links in dense content such as a table, where every row would otherwise be blue. |
| children * | ReactNode | None | The link text. It should name the destination. |
Any other props are passed to the underlying a, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- The link text is the accessible name, so click here causes accessibility problems as well as style ones.
- You can reach a link with Tab, follow it with Enter and open the usual browser menu on it. A div does none of this.
- Leave the visited colour alone. It shows people which pages they have already seen.