Kbd

Used to display textual user input from keyboard.

Installation


pnpm dlx shadcn@latest add @force-ui-vue/kbd

<script setup lang="ts">
import { Kbd } from "@/components/ui/kbd"
</script>
 
<template>
  <Kbd>Ctrl</Kbd>
</template>

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Use the KbdGroup component to group keyboard keys together.

Use the Kbd component inside a Button component to display a keyboard key inside a button.

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

Use variant="primary" when placing a Kbd on a solid or brand-coloured surface so the key label remains legible against the background.

To enable RTL support in Force UI, see the RTL configuration guide.

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`class`	`string`	``
`variant`	`"default" \| "primary"`	`"default"`

<Kbd>Ctrl</Kbd>

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`class`	`string`	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.