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" }}