Kbd

A keyboard key, for documenting shortcuts.

Open the command palette

Ctrl

K

<script setup lang="ts">
  import { Inline, Kbd, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Text>Open the command palette</Text>
    <Inline align="center" gap="xs">
      <Kbd>Ctrl</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>K</Kbd>
    </Inline>
  </Inline>
</template>

vue

Usage

import { Kbd } from '@hina-ui/vue'

The component renders a native kbd element in a monospaced face, with a bottom border heavier than the other three so it reads as a keycap. One component is one key.

Esc

<script setup lang="ts">
  import { Kbd } from '@hina-ui/vue'
</script>

<template>
  <Kbd>Esc</Kbd>
</template>

vue

Examples

Key combinations

Each key gets its own component and the connector between them is up to the caller. Keys pressed together are joined with a plus sign; keys pressed in sequence are described in words.

Ctrl

Shift

P

G

then

H

<script setup lang="ts">
  import { Inline, Kbd, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack>
    <Inline align="center" gap="xs">
      <Kbd>Ctrl</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>Shift</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>P</Kbd>
    </Inline>
    <Inline align="center" gap="xs">
      <Kbd>G</Kbd>
      <Text tone="faint">then</Text>
      <Kbd>H</Kbd>
    </Inline>
  </Stack>
</template>

vue

Scales with its context

The font size is relative and works out to 81.25% of the surrounding text, so it shrinks along with smaller paragraphs.

Press Enter to submit and Esc to cancel.

An Enter in small text shrinks along with it.

<script setup lang="ts">
  import { Kbd, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Text>
      Press
      <Kbd>Enter</Kbd>
      to submit and
      <Kbd>Esc</Kbd>
      to cancel.
    </Text>
    <Text size="sm">
      An
      <Kbd>Enter</Kbd>
      in small text shrinks along with it.
    </Text>
  </Stack>
</template>

vue

Keys in body content

Prose applies the same styling to native kbd elements inside it, so rendered Markdown and rich text need no tag replacement.

A kbd tag in body content needs no separate component.

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      A
      <kbd>kbd</kbd>
      tag in body content needs no separate component.
    </p>
  </Prose>
</template>

vue

API

Props

Prop	Type	Default	Description
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The key name