---
github: true
title: 'Keyboard Key'
navigation:
  title: 'Kbd'
---

## Usage

::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>U</UKbd>
  </div>
</template>
```
::

### Size

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

::component-card
---
props:
  size: 'sm'
---

U
::

## Props

:component-props

## Preset

:component-preset