Skip to main content

Keyboard Key

The <Key/> component show which key or combination of keys performs a given action.

Source@matro-ui/Key

Import​

import { Key } from "matro-ui";
  • Key: Keyboard key component

Usage​

Loading...
Live Editor
<div>
 <Key>Ctrl</Key> + <Key>M</Key>
</div>

Guideline​

  • Use modifiers such as "+", "then", "or" to clearly represent the action to the users.
  • All single letters A-Z should be uppercase.
  • Use the symbol as opposed to spelling things out.
  • Use the symbols that are commonly used. "&" may not be familiar to users from Central Europe or Asia.

Vintage styling​

To add a more vintage look to the <Key/>, set the prop vintage (val: boolean):

Loading...
Live Editor
<div>
 <Key vintage>Ctrl</Key> + <Key vintage>M</Key>
</div>