ui/docs/content/2.elements/8.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/nuxt/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{component="kbd-example"}

Size

Use the size prop to change the size of the Kbd.

::component-card

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

U ::

Props

:component-props

Config

:component-preset