Display

Kbd

A keycap for keyboard shortcuts in prose, menus and tooltips.

<script>
  import { Kbd } from "@codeatlasdev/ui";
</script>

<Kbd>Esc</Kbd>

Kbd renders a native <kbd> element. Use one per key and join combinations with a plain +. The keycap is not selectable, so double clicks on a shortcut do not select it.

<script lang="ts">
  import { Kbd } from '@codeatlasdev/ui';
</script>

<p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open the command palette, or <Kbd>Esc</Kbd> to close it.</p>

Tokens

--ca-kbd-size (a square keycap; default the keycap hugs its label), --ca-kbd-font-size and --ca-kbd-line-height: on :root, a wrapper or ThemeOptions.components.kbd.