Link icon button
A link icon button navigates and shows an icon instead of a label.
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 { LinkIconButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode | — | The glyph. It should already mean the destination to the reader. |
| label * | string | — | Where it goes. It is the only name this has, so it is required. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | — | As for a button. Subtle is the usual choice. |
| spacing | 'default' | 'compact' | — | |
| shape | 'default' | 'circle' | — | Circle for a control floating over content. |
| isSelected | boolean | — |
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 label is required, because an icon with no text and no name is unusable to a screen reader.
- It is an anchor, so it follows on Enter and offers the browser menu, unlike an icon button.
- Name the place rather than the picture, since a reader listing links hears only these labels.