Elements
Keyboard Key
Display a keyboard key in a text block.
Usage
Use the default slot to set the text of the Kbd.
K
<UKbd>K</UKbd>
You can also use the value prop:
K
<UKbd value="K" />
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>
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
<UKbd size="sm">U</UKbd>
Props
value
string
nullsize
"sm" | "xs" | "md"
config.default.sizeui
any
undefinedConfig
UKbd.vue
{
"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"
}
}