Hotkey

Hotkeys show keyboard shortcut combinations based on the user's operating system.

<quiet-hotkey keys="$command K"></quiet-hotkey>

Examples Jump to heading #

Basic usage Jump to heading #

Set the key attribute to a string containing the space-separated keys you want to display in the hotkey. Do not include delimiters, as they will be added automatically.

You can use any of the following keywords to show platform-specific keys.

<quiet-hotkey keys="$option $command B"></quiet-hotkey>

Platform-specific shortcuts Jump to heading #

To show platform-specific hotkeys, use the windows, mac, and linux attributes. These will override the keys attribute, but only on the respective platforms.

<quiet-hotkey
  keys="$command $shift A"
  mac="$shift $command A"
></quiet-hotkey>

Adding a label Jump to heading #

By default, screen readers will announce the hotkey text as-is. To set a custom label for assistive devices, use the label attribute.

<quiet-hotkey
  label="Press command or control + Q to quit"
  keys="$command Q"
></quiet-hotkey>

Setting the platform Jump to heading #

Use the platform attribute to show hotkeys for a specific platform, regardless of the user's operating system. The default value is auto, which will attempt to automatically detect the user's operating system.

<div id="hotkeys__platform">
  <p>
    <quiet-hotkey 
      platform="mac"
      mac="$shift $command M"
      windows="$command $shift W"
      linux="$command $shift L"
    ></quiet-hotkey>
  </p>

  <quiet-radio label="Platform" value="mac">
    <quiet-radio-item value="mac">Mac</quiet-radio-item>
    <quiet-radio-item value="windows">Windows</quiet-radio-item>
    <quiet-radio-item value="linux">Linux</quiet-radio-item>
  </quiet-radio>
</div>

<script>
  const container = document.getElementById('hotkeys__platform');
  const hotkey = container.querySelector('quiet-hotkey');
  const radio = container.querySelector('quiet-radio');

  // Update the platform
  radio.addEventListener('quiet-input', () => {
    hotkey.platform = radio.value;
  });
</script>

Customizing the delimiter Jump to heading #

By default, the delimiter is automatically determined by the platform (no character for Mac and "+" for others). To change it, set the delimiter attribute to the character you want to insert between each key.

<quiet-hotkey 
  keys="$command $shift A" 
  delimiter="·"
></quiet-hotkey>

Changing the appearance Jump to heading #

By default, the keyboard hotkey is styled with <kbd> styles. Set the appearance attribute to unstyled to make it look like plain text. To target individual keys, use the key and keyword parts.

Press 
<quiet-hotkey 
  keys="$command K"
  appearance="unstyled"
></quiet-hotkey>
to search.

Styling keys and keywords Jump to heading #

Use the key and keyword parts to change the styles of individual characters.

Press 
<quiet-hotkey 
  keys="$command K"
  id="hotkeys__styling"
></quiet-hotkey>
to search.

<style>
  quiet-hotkey#hotkeys__styling {
    &::part(keyword) {
      color: dodgerblue;
    }

    &::part(key) {
      color: deeppink;
    }
  }
</style>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/hotkey/hotkey.js';

import '@quietui/quiet/dist/components/hotkey/hotkey.js';

Properties Jump to heading #

Hotkey has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

CSS parts Jump to heading #

Hotkey exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts