Link
A link takes people to a new location in the app or another website.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
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 | — | Where it goes. A link without a destination is a button. |
| appearance | 'default' | 'subtle' | 'default' | Subtle drops the colour for a link inside dense content such as a table, where every row would otherwise be blue. |
| children * | ReactNode | — | The link text. It should name the destination. |
Anything else you pass is forwarded to the underlying a, so the standard attributes and event handlers work as they normally would.
Accessibility
What the component does for you, and what it needs from you.
- The text is the accessible name, which is why click here is an accessibility problem before it is a style one.
- A link is reached with Tab, followed with Enter and offers the usual browser menu, none of which is true of a div.
- The visited colour is a real state, so it is worth leaving alone. It is the one memory the browser gives the reader for free.