Keyboard Key (Kbd)Copy Anchor Link

The Kbd component renders styled visual representations of keyboard keys and shortcut combinations. It features automatic operating system detection (rendering Apple symbols like ⌘, ⌥, ⇧ on macOS and words like Ctrl, Alt, Shift on Windows and Linux), standard key normalization, and semantic HTML <kbd> tag outputs.

Architectural PurposeCopy Anchor Link

In technical application interfaces, keyboard shortcuts empower power users to traverse views with speed and efficiency. The Hashti Kbd component provides an unmistakable visual indicator that resembles a physical keycap:

┌───────┐ ┌───────┐
│   ⌘   │ │   K   │  (Mac)
└───────┘ └───────┘

┌────────┐ ┌───────┐
│  Ctrl  │ │   K   │  (Windows / Linux)
└────────┘ └───────┘

• Platform-Aware Normalization: Automatically switches symbols based on user operating system (isMac). You pass keys={["mod", "k"]} and Hashti outputs ⌘ K on Mac or Ctrl K on Windows.
• Keycap Styling: Tactile borders, subtle background elevations, and monospaced typography reflecting physical keys.
• Composable in Menus & Search Fields: Pairs cleanly with search inputs, command palettes, and dropdown action items.

ImportCopy Anchor Link

import { Kbd } from "@hashti/react";
import type { KbdProps } from "@hashti/react";

Usage ExamplesCopy Anchor Link

Single KeyCopy Anchor Link

Render a single key by passing a string to keys or as direct children:

import { Kbd } from "@hashti/react";

export function SingleKeyDemo() {
  return (
    <div className="flex items-center gap-3">
      <span>Press</span>
      <Kbd keys="escape" />
      <span>to dismiss the active modal.</span>
    </div>
  );
}

Key CombinationsCopy Anchor Link

Pass an array of keys to keys to render a grouped combination:

import { Kbd } from "@hashti/react";

export function KeyCombinationDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between p-3 border border-neutral-200 dark:border-neutral-800 rounded-lg max-w-sm">
        <span className="text-sm">Global Command Palette</span>
        <Kbd keys={["mod", "k"]} />
      </div>

      <div className="flex items-center justify-between p-3 border border-neutral-200 dark:border-neutral-800 rounded-lg max-w-sm">
        <span className="text-sm">Format Document</span>
        <Kbd keys={["shift", "alt", "f"]} />
      </div>

      <div className="flex items-center justify-between p-3 border border-neutral-200 dark:border-neutral-800 rounded-lg max-w-sm">
        <span className="text-sm">Force Refresh Cache</span>
        <Kbd keys={["mod", "shift", "r"]} />
      </div>
    </div>
  );
}

In Search Fields & ToolbarsCopy Anchor Link

Embed Kbd inside search field adornments to advertise global hotkeys:

import { Kbd, Icon } from "@hashti/react";

export function SearchFieldWithKbdDemo() {
  return (
    <div className="relative flex items-center max-w-md w-full">
      <Icon name="search" size={16} className="absolute left-3 text-neutral-400" />
      <input
        type="text"
        placeholder="Search documentation..."
        className="w-full pl-9 pr-14 py-2 text-sm bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <div className="absolute right-2.5">
        <Kbd keys={["mod", "k"]} />
      </div>
    </div>
  );
}

Supported Key TokensCopy Anchor Link

When using the keys prop, Hashti recognizes the following standard keywords:

Single letters (such as 'k', 'p', 's') are automatically capitalized (K, P, S).

Props ReferenceCopy Anchor Link

Kbd extends ComponentPropsWithRef<'kbd'>.

Accessibility GuidanceCopy Anchor Link

• Semantic HTML Tag: Renders a native <kbd> element, which is the official W3C HTML element for identifying user keyboard input.
• Screen Reader Readability: Screen readers announce <kbd> content as text. Using standard key words and symbols ensures text-to-speech engines can enunciate the shortcut (e.g. “Command K”).
• Contrast Ratios: The keycap border and text colors adhere to WCAG 2.2 AAA specifications against both light and dark application backgrounds.

WAI-ARIA & Data AttributesCopy Anchor Link