ui/docs/content/3.components/kbd.md

title, description, category, links, navigation

title	description	category	links	navigation
Keyboard Key	A kbd element to display a keyboard key.	element	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Kbd.vue	title Kbd

Usage

Value

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

::component-code

slots: default: K

::

You can achieve the same result by using the value prop.

::component-code

props: value: K

::

You can pass special keys to the value prop that goes through the useKbd composable. For example, the meta key displays as ⌘ on macOS and Ctrl on other platforms.

::component-code

props: value: meta items: value: - meta - win - command - shift - ctrl - option - alt - enter - delete - backspace - escape - tab - capslock - arrowup - arrowright - arrowdown - arrowleft - pageup - pagedown - home - end

::

Variant

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

::component-code

props: variant: solid slots: default: K

::

Size

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

::component-code

props: size: lg slots: default: K

::

Examples

class prop

Use the class prop to override the base styles of the Badge.

::component-code

props: class: 'font-bold rounded-full' variant: subtle slots: default: K

::

API

Props

:component-props

Slots

:component-slots

Theme

:component-theme