Usage
Use the default slot to set the value of the Kbd.
K
<template>
<B24Kbd>K</B24Kbd>
</template>
Value
Use the value prop to set the value of the Kbd.
K
<template>
<B24Kbd 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 Ctrl on other platforms.
<template>
<B24Kbd value="meta" />
</template>
Accent
Use the accent prop to change the variant of the Kbd.
K
<template>
<B24Kbd accent="accent">K</B24Kbd>
</template>
Size
Use the size prop to change the size of the Kbd.
K
<template>
<B24Kbd size="lg">K</B24Kbd>
</template>
Examples
class prop
Use the class prop to override the base styles of the Badge.
K
<template>
<B24Kbd class="text-(--ui-color-copilot-accent-primary) dark:text-(--ui-color-accent-main-warning) font-(--ui-font-weight-bold) rounded-full" accent="accent">K</B24Kbd>
</template>
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
kbd: {
slots: {
base: 'inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background)'
},
variants: {
accent: {
default: 'style-outline',
accent: 'style-outline-accent-1',
less: 'style-outline-no-accent'
},
size: {
sm: 'h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
md: 'h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
lg: 'h-[28px] min-w-[28px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)'
}
},
defaultVariants: {
accent: 'less',
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
kbd: {
slots: {
base: 'inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background)'
},
variants: {
accent: {
default: 'style-outline',
accent: 'style-outline-accent-1',
less: 'style-outline-no-accent'
},
size: {
sm: 'h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
md: 'h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
lg: 'h-[28px] min-w-[28px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)'
}
},
defaultVariants: {
accent: 'less',
size: 'md'
}
}
}
})
]
})