Enter with Icon Kbd for React

The return arrow is printed on many keys, so people find it faster on the keyboard. It also makes the hint easy to spot at the bottom of a command palette or a chat input.

No, it has aria-hidden, so screen readers read only Enter. Hide decorative icons like this one, and add text whenever the icon is all there is.

The Kbd sizes any icon without its own size class to 12 pixels and spaces it from the text with a small gap. Give the icon a size class, like size-4, to override it.

The ↵ character needs no import and takes the cap's font, as in the Unicode Symbols example. The icon has a consistent stroke that matches other icons in your interface.

Before, as here, so the shape is seen first. Keep one order for every key with an icon in your app.

When Enter does something people might not expect: sends a message, adds a tag, picks a search result. In a regular form, Enter submits and needs no hint.