Keyboard Key
A kbd element to display a 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 thevalue prop.
<template> <UKbd value="K" /></template>You can pass special keys to thevalue prop that goes through theuseKbd composable. For example, themeta key displays as⌘ on macOS and⊞ on other platforms.
<template> <UKbd value="meta" /></template>Variant
Use thevariant prop to change the variant of the Kbd.
<template> <UKbd variant="solid">K</UKbd></template>Size
Use thesize prop to change the size of the Kbd.
<template> <UKbd size="lg">K</UKbd></template>Examples
class prop
Use theclass prop to override the base styles of the Badge.
<template> <UKbd class="font-bold rounded-full" variant="subtle">K</UKbd></template>API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
value |
| |
variant |
|
|
size |
|
|
Slots
| Slot | Type |
|---|---|
default |
|
Theme
app.config.ts
export default defineAppConfig({ ui: { kbd: { base: 'inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans', variants: { variant: { solid: 'bg-(--ui-bg-inverted) text-(--ui-bg)', outline: 'bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)', subtle: 'bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)' }, size: { sm: 'h-4 min-w-[16px] text-[10px]', md: 'h-5 min-w-[20px] text-[11px]', lg: 'h-6 min-w-[24px] text-[12px]' } }, defaultVariants: { variant: 'outline', size: 'md' } } }})vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uifrom '@nuxt/ui/vite'export default defineConfig({ plugins: [ vue(), ui({ ui: { kbd: { base: 'inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans', variants: { variant: { solid: 'bg-(--ui-bg-inverted) text-(--ui-bg)', outline: 'bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)', subtle: 'bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)' }, size: { sm: 'h-4 min-w-[16px] text-[10px]', md: 'h-5 min-w-[20px] text-[11px]', lg: 'h-6 min-w-[24px] text-[12px]' } }, defaultVariants: { variant: 'outline', size: 'md' } } } }) ]})vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uiProfrom '@nuxt/ui-pro/vite'export default defineConfig({ plugins: [ vue(), uiPro({ ui: { kbd: { base: 'inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans', variants: { variant: { solid: 'bg-(--ui-bg-inverted) text-(--ui-bg)', outline: 'bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)', subtle: 'bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)' }, size: { sm: 'h-4 min-w-[16px] text-[10px]', md: 'h-5 min-w-[20px] text-[11px]', lg: 'h-6 min-w-[24px] text-[12px]' } }, defaultVariants: { variant: 'outline', size: 'md' } } } }) ]})