Active State Kbd for React

In interactive tutorials that show which key to hold next, in on-screen keyboard overlays for screen recordings, and in shortcut trainers that react to what the user presses. In static docs, every key in a shortcut is pressed together, so highlighting one is confusing.

A strong fill with contrasting text, like the primary color here, reads at a glance. Keep the cap's size and shape the same as the others, so the state changes but the layout doesn't move.

Yes. Put the same classes on every key that's held: a shortcut trainer would light ⌘ and then K as they go down. Compute the classes from the keys that are pressed instead of hard-coding them.

No. Kbd is a label, not a control: it ignores the pointer, and screen readers don't announce it as a button. If clicking should run the command, use a Button and show the shortcut inside it.

A short color transition, around 100 to 150 milliseconds, softens the change; anything longer lags behind a real key press. Turn it off for people who prefer reduced motion.

Color alone doesn't reach screen readers. If the state matters, say it in text as well, for example a visually hidden held after the key name, or a live region that announces the next key to press in a tutorial.