Use o slot padrão para definir o valor do Kbd.
<template>
<NKbd>K</NKbd>
</template>
Use a prop value para definir o valor do Kbd.
<template>
<NKbd value="K" />
</template>
Você pode passar teclas especiais para a prop value, que passam pelo composable useKbd. Por exemplo, a tecla meta é exibida como ⌘ no macOS e Ctrl em outras plataformas.
<template>
<NKbd value="meta" />
</template>
Use a prop color para alterar a cor do Kbd.
<template>
<NKbd color="neutral">K</NKbd>
</template>
Use a prop variant para alterar a variante do Kbd.
<template>
<NKbd color="neutral" variant="solid">K</NKbd>
</template>
Use a prop size para alterar o tamanho do Kbd.
<template>
<NKbd size="lg">K</NKbd>
</template>
class propUse a prop class para sobrescrever os estilos base do Badge.
<template>
<NKbd class="font-bold rounded-full" variant="subtle">K</NKbd>
</template>
| Prop | Default | Type |
|---|---|---|
as | 'kbd' | anyThe element or component this component should render as. |
value | string | |
color | 'neutral' | "neutral" |
variant | 'outline' | "outline" | "soft" | "subtle" | "solid" |
size | 'md' | "sm" | "md" | "lg" |
| Slot | Type |
|---|---|
default | {} |
export default defineAppConfig({
ui: {
kbd: {
base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase',
variants: {
color: {
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
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]'
}
},
compoundVariants: [
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated'
}
],
defaultVariants: {
variant: 'outline',
color: 'neutral',
size: 'md'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
kbd: {
base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase',
variants: {
color: {
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
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]'
}
},
compoundVariants: [
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated'
}
],
defaultVariants: {
variant: 'outline',
color: 'neutral',
size: 'md'
}
}
}
})
]
})