Default Gray Amethyst

Kbd

<mo-kbd> | MOKbd
Since 4.0 experimental

Kbd is used to represent user input in a way that is easy to understand.

Press K on MacOS or K on Windows to open the search. 

<p>
Press <mo-kbd keys="command">K</mo-kbd> on MacOS or <mo-kbd keys="ctrl">K</mo-kbd> on Windows to open the search.
</p>

import { MOKbd } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <p>
    Press <MOKbd keys={["command"]}>K</MOKbd> on MacOS or <MOKbd keys={["ctrl"]}>K</MOKbd> on Windows to open the search.
  </p>
);

Examples

Multiple keys

You can assign multiple keys to be prepended before the main slotted key content.

Press 7 on MacOS or \ on Windows to toggle the theme. 

<p>
Press <mo-kbd keys="option shift">7</mo-kbd> on MacOS or <mo-kbd>\</mo-kbd> on Windows to toggle the theme.
</p>

import { MOKbd } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <p>
    Press <MOKbd keys={["option", "shift"]}>7</MOKbd> on MacOS or <MOKbd>\</MOKbd> on Windows to toggle the theme.
  </p>
);

Sizes

You can easily change the size of the mo-kbd to match your needs using the size attribute.

S M L 
<div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: start;">
<mo-kbd size="small" keys="command shift">S</mo-kbd>
<mo-kbd size="medium" keys="command shift">M</mo-kbd>
<mo-kbd size="large" keys="command shift">L</mo-kbd>
</div>

import { MOKbd } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: start;">
    <MOKbd size="small" keys={["command", "shift"]}>S</MOKbd>
    <MOKbd size="medium" keys={["command", "shift"]}>M</MOKbd>
    <MOKbd size="large" keys={["command", "shift"]}>L</MOKbd>
  </div>
);

Inside a menu

You can include the mo-kbd shortcuts in dropdown or context menus to indicate how users can access those functions without opening the menu.

Copy C Paste V Cut X 
<mo-menu class="kbd-menu" style="max-width: 200px;">
  <mo-menu-item>
    Copy
    <mo-kbd size="small" slot="suffix" keys="ctrl">C</mo-kbd>
  </mo-menu-item>
  <mo-menu-item>
    Paste
    <mo-kbd size="small" slot="suffix" keys="ctrl">V</mo-kbd>
  </mo-menu-item>
  <mo-menu-item>
    Cut
    <mo-kbd size="small" slot="suffix" keys="ctrl">X</mo-kbd>
  </mo-menu-item>
</mo-menu>

<style>
  .kbd-menu mo-menu-item::part(checked-icon) {
    width: 0.25em;
  }

  .kbd-menu mo-menu-item::part(submenu-icon) {
    width: 0em;
  }
</style>

import { MOKbd, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOMenu class="kbd-menu" style="max-width: 200px;">
    <MOMenuItem>
      Copy
      <MOKbd size="small" slot="suffix" keys="ctrl">C</MOKbd>
    </MOMenuItem>
    <MOMenuItem>
      Paste
      <MOKbd size="small" slot="suffix" keys="ctrl">V</MOKbd>
    </MOMenuItem>
    <MOMenuItem>
      Cut
      <MOKbd size="small" slot="suffix" keys="ctrl">X</MOKbd>
    </MOMenuItem>
  </MOMenu>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/kbd/kbd.js';

To import this component as a React component:

import MOKbd from '@metsooutotec/modes-web-components/dist/react/kbd/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/kbd/kbd.js"></script>

Slots

Name Description
(default) The default slot. Used to render the content of the component.

Learn more about using slots.

Properties

Name Description Reflects Type Default
keys A list of symbols to prepend before the slot. You can use a space separated string or an array of strings. string | KbdKey[] | undefined -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.