Keyboard Key

Usage

Value

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

<template>
  <UKbd>K</UKbd>
</template>

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

<template>
  <UKbd value="K" />
</template>

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 ⊞ on other platforms.

<template>
  <UKbd value="meta" />
</template>

Variant

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

<template>
  <UKbd variant="solid">K</UKbd>
</template>

Size

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

<template>
  <UKbd size="lg">K</UKbd>
</template>

Examples

class prop

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

<template>
  <UKbd class="font-bold rounded-full" variant="subtle">K</UKbd>
</template>

API

Props

Slots

Theme

export default defineAppConfig({
  uiPro: {
    prose: {
      kbd: {
        base: 'align-text-top'
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        prose: {
          kbd: {
            base: 'align-text-top'
          }
        }
      }
    })
  ]
})