Kbd

This component is used to display which key or combination of keys performs a given action.

import * as React from 'react';
import { Kbd, KbdKeys } from '@itwin/itwinui-react';

export default () => {
  return (
    <p>
      Press <Kbd>{KbdKeys.Command}</Kbd> + <Kbd>K</Kbd> to search.
    </p>
  );
};

Usage

The <Kbd> component is a styled wrapper around the <kbd> HTML element.

You can pass custom key(s) as children.

<Kbd>A</Kbd>

You can also use the KbdKeys object which includes a convenient set of constants for common modifier keys.

<Kbd>{KbdKeys.Enter}</Kbd>

List of supported keys:

• KbdKeys.Command (⌘ Cmd)
• KbdKeys.Shift (⇧ Shift)
• KbdKeys.Backspace (⌫ Backspace)
• KbdKeys.Enter (↵ Enter)
• KbdKeys.Eject (⏏ Eject)
• KbdKeys.Control (Ctrl)
• KbdKeys.Windows (⊞ Win)
• KbdKeys.Apple ()
• KbdKeys.Option (⌥ Option)
• KbdKeys.Left (←)
• KbdKeys.Up (↑)
• KbdKeys.Right (→)
• KbdKeys.Down (↓)

Important: Some of the keys are specific to the operating system and may not be available universally.

Props