Keyboard Key

We are still updating this page

Some data may be missing here — we will complete it shortly.

A kbd element for indicating a keyboard input.

Nuxt UI

Git

Demo

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

@remove

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
}

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

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

API

Props

Prop	Default	Type
as	"kbd"	any The element or component this component should render as.
value		string
accent	"default"	"default" | "accent" | "less"
size	'md'	"sm" | "md" | "lg"

Slots

Slot	Type
default	{}