Special Keys Kbd for React

The ones whose behavior isn't obvious in your app: Esc if it closes panels or cancels edits, Enter if it submits or confirms, Tab if focus moves through a custom widget. Standard form behavior rarely needs a hint.

Alone when the key does the job by itself, like Esc to close. Combined when it needs a modifier, like Shift Tab to go back or ⌘ Enter to send a message in a multi-line field.

When the form does something unexpected with them: Enter adds a tag instead of submitting, ⌘ Enter submits from a text area, Esc discards changes. Put the hint next to the field or button it affects.

The Dialog closes on Esc already, and most people expect it, so a hint is optional. It helps in focused tools like a command palette, where Esc is part of the flow.

They're the core of keyboard navigation, so keep their standard behavior: Tab moves focus forward, Enter activates, Esc dismisses. Changing them breaks keyboard and screen reader use.

Their names already make the caps wider. A return or tab symbol before the name adds a visual cue, as the Unicode Symbols and Enter with Icon examples show.