Kbd

GitHub
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 Ctrl on other platforms.

<template>
  <UKbd value="meta" />
</template>

Color Soon

Use the color prop to change the color of the Kbd.

K
<template>
  <UKbd color="neutral">K</UKbd>
</template>

Variant

Use the variant prop to change the variant of the Kbd.

K
<template>
  <UKbd color="neutral" 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

'kbd'

any

The element or component this component should render as.

value

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'outline'

"outline" | "soft" | "subtle" | "solid"

size

'md'

"sm" | "md" | "lg"

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    kbd: {
      base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          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: 'primary',
          variant: 'solid',
          class: 'text-inverted bg-primary'
        },
        {
          color: 'primary',
          variant: 'outline',
          class: 'ring ring-inset ring-primary/50 text-primary'
        },
        {
          color: 'primary',
          variant: 'soft',
          class: 'text-primary bg-primary/10'
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
        },
        {
          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'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/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',
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              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: 'primary',
              variant: 'solid',
              class: 'text-inverted bg-primary'
            },
            {
              color: 'primary',
              variant: 'outline',
              class: 'ring ring-inset ring-primary/50 text-primary'
            },
            {
              color: 'primary',
              variant: 'soft',
              class: 'text-primary bg-primary/10'
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
            },
            {
              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'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        kbd: {
          base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              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: 'primary',
              variant: 'solid',
              class: 'text-inverted bg-primary'
            },
            {
              color: 'primary',
              variant: 'outline',
              class: 'ring ring-inset ring-primary/50 text-primary'
            },
            {
              color: 'primary',
              variant: 'soft',
              class: 'text-primary bg-primary/10'
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
            },
            {
              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'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.