Kbd
v1.3.3
Display a keyboard keys such as shortcuts or hotkeys
Usage
Use the default slot to display the keyboard key.
K
<template>
<RayKbd />
</template>
The label prop also can be used to do so.
K
<template>
<RayKbd label="K" />
</template>
Sizes
The size prop changes the size of the kbd.
K
<template>
<RayKbd size="sm" />
</template>
Shadow
Add a shadow to the kbd.
K
<template>
<RayKbd shadow />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
| size | config.default.size | KbdSize | undefined |
| label | null | string | undefined |
| ui | {} | ({ base?: string | undefined; rounded?: string | undefined; font?: string | undefined; background?: string | undefined; ring?: string | undefined; padding?: string | undefined; shadow?: string | undefined; size?: DeepPartial<...> | undefined; default?: DeepPartial<...> | undefined; } & { ...; } & { ...; }) | undefined |
| shadow | false | boolean | undefined |
Theme
{
base: 'inline-flex justify-center items-center text-gray-900 dark:text-gray-100 leading-none',
rounded: 'rounded',
font: 'font-medium',
background: 'bg-gray-100 dark:bg-gray-800',
ring: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700',
padding: 'px-1',
shadow: 'shadow-sm',
size: {
xs: 'h-4 min-w-4 text-[10px]',
sm: 'h-5 min-w-5 text-[11px]',
md: 'h-6 min-w-6 text-xs'
},
default: {
size: 'sm'
}
}