Kbd

Semantic <kbd> wrapper component that visually separates keyboard shortcuts from regular text through neo-brutalist styling, making documentation and command prompts clear at a glance.

Demo

Preview

常用快捷键

⌘+K打开命令面板

Ctrl+S保存

Shift+Tab反向缩进

尺寸

EscEnterSpace

变体

EscEnterTabSpaceFn

Installation

pnpm dlx brutx-vue@latest add kbd

Usage

<script setup>
import { Kbd } from 'brutx-ui-vue'
</script>

<template>
    <!-- Single key -->
    <Kbd>Enter</Kbd>

    <!-- Key combination -->
    <div class="flex items-center gap-1">
        <Kbd>⌘</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
    </div>

    <!-- Sizes -->
    <Kbd size="sm">Esc</Kbd>
    <Kbd size="md">Tab</Kbd>
    <Kbd size="lg">Space</Kbd>
</template>

Variants

Variant	Description
default	Neutral background with standard foreground text
primary	Primary (coral) background with high-contrast foreground
secondary	Secondary (mint) background
accent	Accent (yellow) background
backlit	Black background with accent-colored text for a backlit keycap

<script setup>
import { Kbd } from 'brutx-ui-vue'
</script>

<template>
    <div class="flex items-center gap-2">
        <Kbd variant="default">Esc</Kbd>
        <Kbd variant="primary">Enter</Kbd>
        <Kbd variant="secondary">Tab</Kbd>
        <Kbd variant="accent">Space</Kbd>
        <Kbd variant="backlit">Fn</Kbd>
    </div>
</template>

Sizes

Size	Description
sm	Small size, suitable for inline compact scenarios
md	Default size
lg	Large size, suitable for standalone display

API Reference

Kbd — Props

Name	Type	Default	Description
variant	"accent" | "backlit" | "default" | "primary" | "secondary" | undefined	"default"	Controls the keycap colors. The backlit variant uses a black background and accent-colored text for a backlit appearance.
Details Declared type NonNullable<"default" | "primary" | "secondary" | "accent" | "backlit" | null | undefined> | undefined Literal values "accent" "backlit" "default" "primary" "secondary" Default value details Declaration 'default' Source: packages/ui/src/components/kbd/Kbd.vue Resolved value "default" Source Kbd.vue:10 packages/ui/src/components/kbd/Kbd.vue
size	"lg" | "md" | "sm" | undefined	"md"	Controls the keycap padding, font size, and minimum width.
Details Declared type NonNullable<"lg" | "sm" | "md" | null | undefined> | undefined Literal values "lg" "md" "sm" Default value details Declaration 'md' Source: packages/ui/src/components/kbd/Kbd.vue Resolved value "md" Source Kbd.vue:11 packages/ui/src/components/kbd/Kbd.vue
class	string | undefined	undefined	Additional CSS classes merged into the native kbd root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/kbd/Kbd.vue Resolved value undefined Source Kbd.vue:12 packages/ui/src/components/kbd/Kbd.vue

Kbd — Slots

Name	Signature or type	Description
#default	{}	The key name, symbol, or icon displayed inside the keycap. The component presents a keyboard shortcut hint.
Details Declared type {} Source Kbd.vue packages/ui/src/components/kbd/Kbd.vue

Accessibility

• Semantic Markup: Uses the native <kbd> element for rendering, so screen readers can correctly identify it as a keyboard key
• Visual Presentation: Visually separates keys from regular text through brutalist styling, improving readability
• Key Combination Display: Supports displaying keyboard shortcuts by combining multiple <Kbd> components with clear semantics