Kbd

Indicates input that is typically entered via keyboard.

Source

Examples

Basic

Preview
Code
⌘KFnCtrl

Variant

PropDefaultTypeDescription
kbdsolid{variant}The variant of the kbd.
VariantDescription
solidThe default variant.
outlineThe outline variant.
~The unstyle or base variant
Preview
Code
EnterEnterEnter

Color

PropDefaultTypeDescription
kbd{variant}-gray{variant}-{color}The color of the kbd.
Preview
Code
⌘⌘⌘⌘

Size

PropDefaultTypeDescription
sizemdstringThe size of the kbd.
Preview
Code
⌘⌘⌘⌘⌘

Integration

NKbd can be used with other components to create more complex elements e.g:

  • can be used with NButton to create a button that is triggered by a keyboard shortcut.
  • can be used with NInput to create an input that is triggered by a keyboard shortcut.
Preview
Code
⌘ K

Slots

NamePropsDescription
default-The content slot.

Props

types/kbd.ts 
export interface NKbdProps {
  /**
   * Allows you to add `UnaUI` kbd preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/kbd.ts
   * @example
   * kbd="solid-error"
   */
  kbd?: string
  /**
   * Add a label to the kbd.
   *
   * @example
   * label="Ctrl"
   */
  label?: string

  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/kbd.ts
   */
  una?: {
    kbd?: string
  }
}

Presets

shortcuts/kbd.ts 
type KbdPrefix = 'kbd'

export const staticKbd: Record<`${KbdPrefix}-${string}` | KbdPrefix, string> = {
  // config
  'kbd-default-variant': 'kbd-solid-gray',

  // base
  'kbd': 'inline-flex text-nowrap items-center h-1.8181818181818181em min-w-1.8181818181818181em font-sans justify-center rounded px-0.5454545454545454em py-0.18181818181818182em text-0.6875em font-normal',
}

export const dynamicKbd: [RegExp, (params: RegExpExecArray) => string][] = [
  // modifiers
  [/^kbd-ring(-(\S+))?$/, ([, , c = 'gray']) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700/58`],

  // variants
  [/^kbd-solid(-(\S+))?$/, ([, , c = 'gray']) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
  [/^kbd-outline(-(\S+))?$/, ([, , c = 'gray']) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`],
]

export const kbd = [
  ...dynamicKbd,
  staticKbd,
]

Components

Kbd.vue
<script setup lang="ts">
import type { NKbdProps } from '../../types'
import { computed } from 'vue'

const props = defineProps<NKbdProps>()

const kbdVariants = ['solid', 'outline'] as const
const hasVariant = computed(() => kbdVariants.some(kbdVariants => props.kbd?.includes(kbdVariants)))
const isBaseVariant = computed(() => props.kbd?.includes('~'))
</script>

<template>
  <kbd
    class="kbd"
    :kbd="kbd"
    :class="[
      { 'kbd-default-variant': !hasVariant && !isBaseVariant },
      una?.kbd,
    ]"
  >
    <slot>
      {{ label }}
    </slot>
  </kbd>
</template>
Edit this page on GitHub
Input
Displays a form input field or a component that looks like an input field.
Label
Renders an accessible label associated with controls.