ui/docs/content/2.elements/7.kbd.md

github, title, description, navigation

github	title	description	navigation
true	Keyboard Key	Display a keyboard key in a text block.	title Kbd

Usage

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

::component-card

code: K

K ::

You can also use the value prop:

::component-card

props: 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.

::component-example #default :kbd-example

#code

<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.

::component-card

props: size: 'sm' code: 'U'

U ::

Props

:component-props

Preset

:component-preset