Keyboard Key

A kbd element for indicating a keyboard input.

Nuxt UI

Git

Usage

Value

Use the default slot to set the value of the Kbd.

Details

<template>
  <B24Kbd>K</B24Kbd>
</template>

You can achieve the same result by using the value prop.

Details

<script setup lang="ts">
export interface ExampleProps {
  value?: any
}

withDefaults(defineProps<ExampleProps>(), {
  value: 'D'
})
</script>

<template>
  <B24Kbd :value="value" />
</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.

Details

<script setup lang="ts">
export interface ExampleProps {
  value?: any
}

withDefaults(defineProps<ExampleProps>(), {
  value: 'meta'
})
</script>

<template>
  <B24Kbd :value="value" />
</template>

Depth

Use the depth parameter to change the intensity of the Kbd.

Details

<script setup lang="ts">
export interface ExampleProps {
  depth?: any
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark'
})
</script>

<template>
  <B24Kbd :depth="depth" value="K" />
</template>

Size

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

Details

<script setup lang="ts">
export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'lg'
})
</script>

<template>
  <B24Kbd :size="size" value="K" />
</template>

Examples

class prop

Use the class prop to override the base styles of the Badge.

Details

<script setup lang="ts">
export interface ExampleProps {
  classValue?: any
  depth?: any
}

withDefaults(defineProps<ExampleProps>(), {
  classValue: 'text-ai-500 dark:text-orange-500 font-bold rounded-full',
  depth: 'dark'
})
</script>

<template>
  <B24Kbd :class="classValue" :depth="depth" value="K" />
</template>

API

Props

Prop	Default	Type
as	"kbd"	any The element or component this component should render as.
value		string
depth	'light'	"light" | "normal" | "dark"
size	'md'	"sm" | "md" | "lg"

Slots

Slot	Type
default	{}