Keyboard Key
A kbd element to display a keyboard key.
Usage
Value
Use the default slot to set the value of the Kbd.
K
<template>
<UKbd>K</UKbd>
</template>
You can achieve the same result by using the value prop.
K
<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.
K
<template>
<UKbd variant="solid">K</UKbd>
</template>
Size
Use the size prop to change the size of the Kbd.
K
<template>
<UKbd size="lg">K</UKbd>
</template>
Examples
class prop
Use the class prop to override the base styles of the Badge.
K
<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-[var(--ui-radius)] font-medium font-sans',
variants: {
variant: {
solid: 'bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]',
outline: 'bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]',
subtle: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--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'
}
}
}
})