Props

Name	Type	Default	Description
keys	string	-	Required. The keyboard shortcut to present, with the keys separated by +, such as "mod+k" or "shift+plus". Each segment paints one key badge; whitespace around a segment is ignored, and an unrecognized segment is uppercased.

Key names

Written as	Painted as	Spoken as
mod	⌘ / Ctrl	Command on Apple platforms, Control elsewhere
ctrl	⌃	Control
alt	⌥	Alt
shift	⇧	Shift
enter / return	↵	Enter
backspace	⌫	Backspace
tab	⇥	Tab
escape / esc	Esc	Escape
up	↑	Up arrow
down	↓	Down arrow
left	←	Left arrow
right	→	Right arrow
plus	+	Plus

A segment that is not in this table is painted uppercased as written and spoken as that same text, so f1 paints as F1.

Accessibility

The root element carries role="img" and an aria-label assembled from the spoken key names, so keys="mod+k" is announced as "Control + K". The badges themselves are aria-hidden="true", because the glyphs they paint mean nothing to assistive technology. role and aria-label are computed by the component, and a consumer value for either is ignored; every other aria-* attribute passes through.

Native attributes

The root element is a <span>.

The following go to the root element:

• HTML attributes.
• aria-* attributes, except role and aria-label (see the previous section).
• data-* attributes.
• class.
• style.