Link icon button
A link icon button navigates and shows an icon instead of a label.
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 { LinkIconButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode | None | The icon. People should recognise where it goes from the icon alone. |
| label * | string | None | Where the link goes. It is required, because it is the only accessible name. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | None | As for a button. Subtle is the usual choice. |
| spacing | 'default' | 'compact' | None | |
| shape | 'default' | 'circle' | None | Circle for a control floating over content. |
| isSelected | boolean | None |
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 label is required. Without it, a screen reader has nothing to announce.
- It is a real link, so Enter follows it and the browser link menu works. An icon button does neither.
- Name the place, not the picture. Screen reader users who list the links on a page hear only these labels.