Keyboard Key

The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add kbd

<template>
  <UiKbd>Ctrl</UiKbd>
</template>

⌘⇧⌥⌃

Ctrl+B

Use the KbdGroup component to group keyboard keys together.

Use

Ctrl + BCtrl + K

to open the command palette

Use the Kbd component inside a Button component to display a keyboard key inside a button.

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

⌘K

Ctrl+B

Ctrl+B

Item

A versatile component that you can use to display any content.

Label

Renders an accessible label associated with controls.