Spotlight
A spotlight focuses attention on a specific part of the UI to educate users about key features or workflows.
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 { Spotlight } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | — | What this step is about, in a few words. |
| children * | ReactNode | — | One or two sentences. A spotlight interrupts, so it should be brief. |
| actions | ReactNode | — | Forward and back, or a single dismissal at the end. |
| footer | string | — | The position in a sequence, as in 1 of 3, so the reader knows how long this will take. |
Accessibility
What the component does for you, and what it needs from you.
- A spotlight takes focus when it opens and returns it when it closes, so a keyboard reader is not dropped somewhere else.
- It can be dismissed from the keyboard, which is what makes it an interruption rather than a trap.
- The sequence position is text, so it is announced rather than only seen.