---
github: true
title: 'Keyboard Key'
navigation:
  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](/getting-started/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
```vue
<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