Kbd

ui-kbd shows a single key or key label in a small muted box. ui-kbd-group puts several keys in a row for a shortcut. Both are presentational. Wrap them in a native <kbd> when the text should be marked up as keyboard input.

Preview

index.html

⌘

⇧

⌥

⌃

Ctrl

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kbd demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/kbd.html"></import-element>

  <ui-kbd-group>
    <ui-kbd>⌘</ui-kbd>
    <ui-kbd>⇧</ui-kbd>
    <ui-kbd>⌥</ui-kbd>
    <ui-kbd>⌃</ui-kbd>
  </ui-kbd-group>
  <ui-kbd-group>
    <ui-kbd>Ctrl</ui-kbd>
    <span>+</span>
    <ui-kbd>B</ui-kbd>
  </ui-kbd-group>
</body>
</html>

Examples

In text

Preview

index.html

Press ⌘ K to open the command palette, or Esc to close it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kbd demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-muted {
      margin: 0;
      font-size: var(--text-sm);
      color: var(--muted-foreground);
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/kbd.html"></import-element>

  <p class="demo-muted">
    Press <ui-kbd>⌘</ui-kbd> <ui-kbd>K</ui-kbd> to open the command palette, or <ui-kbd>Esc</ui-kbd> to close it.
  </p>
</body>
</html>

In a button

A key label inside a button hints at its shortcut.

Preview

index.html

Search… ⌘K

Accept ⏎

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kbd demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/kbd.html"></import-element>

  <ui-button variant="outline" size="sm">Search… <ui-kbd>⌘K</ui-kbd></ui-button>
  <ui-button variant="outline" size="sm">Accept <ui-kbd>⏎</ui-kbd></ui-button>
</body>
</html>

With semantic markup

Wrap the keys in <kbd> so the shortcut is also marked up as keyboard input. Each ui-kbd sets its own font, so the native monospace font of <kbd> does not reach the key labels.

Preview

index.html

Ctrl Shift P

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kbd demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/kbd.html"></import-element>

  <kbd>
    <ui-kbd-group>
      <ui-kbd>Ctrl</ui-kbd>
      <ui-kbd>Shift</ui-kbd>
      <ui-kbd>P</ui-kbd>
    </ui-kbd-group>
  </kbd>
</body>
</html>

Preview

index.html

Save

Save draft ⌘S

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kbd demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/kbd.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/tooltip.html"></import-element>

  <ui-tooltip>
    <ui-tooltip-trigger><ui-button variant="outline">Save</ui-button></ui-tooltip-trigger>
    <ui-tooltip-content>Save draft <ui-kbd>⌘S</ui-kbd></ui-tooltip-content>
  </ui-tooltip>
</body>
</html>

API

Parts

Part	Slot	Renders
`ui-kbd`	(default)	One key in a small muted box. Its default slot takes the key label: a character, a word, or a small `<svg>` icon.
`ui-kbd-group`	(default)	An inline row of keys with a small gap. Its default slot takes the `ui-kbd` elements and any separators such as `+` or `then`.

Attributes

Neither element has attributes.

CSS parts

None. Both elements render only a slot.

Accessibility

Neither element has a role. Screen readers read the key labels as text, so prefer words such as Ctrl or Esc over symbols when the audience may not know the symbols, or add visually hidden text. ui-kbd sets pointer-events: none and user-select: none, so clicks go to the surrounding element.

Edit this page on GitHub · View as Markdown