Menu
Documentation
v4.0.0-beta.4

Kbd

<BaseKbd /> · An abstraction of a keyboard key.

View SourceOpen Issue
⌘ + k
⌘ + k
vue
<template>
  <div class="flex items-center gap-1">
    <BaseKbd
      variant="default"
      size="md"
    >
      ⌘
    </BaseKbd>
    +
    <BaseKbd
      variant="default"
      size="md"
    >
      <span class="px-1">k</span>
    </BaseKbd>
  </div>
</template>

Features

  • Easy to use
  • Supports variants and sizes

Anatomy

This component can have any children inside its default slot. You can use the provided slots to create a custom kbd element

vue
<template>
  <BaseKbd>
    <!-- Your custom content here -->
  </BaseKbd>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
variant
default:"default"
"default" | "none" | "muted"

The variant of the kbd.

size
default:"md"
"md" | "sm" | "lg"

The size of the kbd.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:"kbd"
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any

Input Number

Link