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
null
size
"sm" | "xs" | "md"
config.default.size
ui
any
undefined
Preset
appConfig.ui.kbd
undefined