Components

Keyboard Key

Display a keyboard key in a text block.

Usage

Use the default slot to set the text of the Kbd.

K

<template>
  <UKbd>K</UKbd>
</template>

You can also use the value prop:

K
<template>
  <UKbd value="K" />
</template>

As explained in the Shortcuts page, you can use the metaSymbol property of the useShortcuts composable to display the meta key according to the user's OS.

K
<script setup lang="ts">
const { metaSymbol } = useShortcuts()
</script>

<template>
  <div class="flex items-center gap-0.5">
    <UKbd>{{ metaSymbol }}</UKbd>
    <UKbd>K</UKbd>
  </div>
</template>

Size

Use the size prop to change the size of the Kbd.

U

<template>
  <UKbd size="sm">U</UKbd>
</template>

Props

ui
{}
{}
size
KbdSize
config.default.size
"sm""xs""md"
value
string
null

Config

{
  base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
  padding: 'px-1',
  size: {
    xs: 'h-4 min-w-[16px] text-[10px]',
    sm: 'h-5 min-w-[20px] text-[11px]',
    md: 'h-6 min-w-[24px] text-[12px]',
  },
  rounded: 'rounded',
  font: 'font-medium font-sans',
  background: 'bg-gray-100 dark:bg-gray-800',
  ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
  default: {
    size: 'sm',
  },
}