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

title, description, links, navigation

title	description	links	navigation
Keyboard Key	Display a keyboard key in a text block.	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Kbd.vue	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