Kbd
Used to display textual user input from keyboard.
⌘⇧⌥⌃Ctrl+B
Installation
pnpm dlx shadcn-vue@latest add kbd Usage
vue
<script setup lang="ts"> import { Kbd } from '@/components/ui/kbd' </script> <template> <Kbd>Ctrl</Kbd> </template>Examples
Group
Use the KbdGroup component to group keyboard keys together.
⌘⇧⌥⌃Ctrl+B
Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
API Reference
Kbd
Use the Kbd component to display a keyboard key.
| Prop | Type | Default |
|---|---|---|
class | string | `` |
vue
<Kbd> Ctrl </Kbd>KbdGroup
Use the KbdGroup component to group Kbd components together.
| Prop | Type | Default |
|---|---|---|
class | string | `` |
vue
<KbdGroup> <Kbd>Ctrl</Kbd> <Kbd>B</Kbd> </KbdGroup>