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.

Shortcuts in text

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

Code

<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>

Props

Prop	Type	Default	Description
`children`	`Snippet`	–	The key label, for example Ctrl or K.
`class`	`string`	`''`	Extra classes on the `<kbd>` element.