🟢 Kbd

Work in progress - this component is not yet ready for use.

Basic

NKbd is a component for indicating input that is typically entered via keyboard.

You can use label prop or default slot to set the value kbd.

⌘KFnCtrl

Variants

kbd="{variant}" - change the variant of the kbd.

Variant	Description
`solid`	The default variant.
`outline`	The outline variant.
`~`	The unstyle or base variant

EnterEnterEnter

Color

kbd="{variant}-{color}" - change the color of the kbd.

You can use any color provided by the Tailwind CSS color palette, the default is primary. You can also add your own colors to the palette through the Configuration section.

⌘⌘⌘⌘

Sizes

NKbd can be sized using the size prop.

🚀 You can freely adjust the size of the kbd using any size imaginable. No limits exist, and you can use breakpoints such as sm:sm, xs:lg to change size based on screen size or states such as hover:lg, focus:3xl to change size based on input state and more.

The padding and font-size of the kbd scale depends on the size. If you want to change the font-size and padding simultaneously, you can always customize it using utility classes.

⌘⌘⌘⌘⌘

Usage with Other Components

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.

size prop is automatically inherited from the parent component when used with other components.

⌘ K

Slots

Default

#default - set the kbd value.

Props

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

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,
]

Component

<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

Components🟢 Input

Components🟢 Label