Base

Kbd

A styled component for displaying keyboard keys or shortcuts. Supports single keys and key combinations.

Installation

bash

npx polyui add kbd

Basic Usage

Use Kbd for a single key and KbdGroup to compose multiple keys into a shortcut.

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"

export function Example() {
  return (
    <div className="flex items-center gap-3">
      {/* Single key */}
      <Kbd>⌘K</Kbd>

      {/* Key combination */}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>

      {/* Three-key shortcut */}
      <KbdGroup>
        <Kbd>⇧</Kbd>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  )
}

Preview Link

⌘KCtrlS⇧⌘PAltF4

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"
export function KbdPreview() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Kbd>⌘K</Kbd>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>⇧</Kbd>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Alt</Kbd>
        <Kbd>F4</Kbd>
      </KbdGroup>
    </div>
  )
}

Tooltip

When placed inside a Tooltip, Kbd automatically adjusts its colors for contrast.

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@polyui/react/tooltip"
export function KbdTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger className="text-sm underline underline-offset-4 cursor-default">Search</TooltipTrigger>
        <TooltipContent>
          Open search{" "}
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Props — Kbd

属性	类型	默认值	说明
`className`	`string`	`—`	Additional CSS class names
`children`	`React.ReactNode`	`—`	Key content, typically a character or symbol

Props — KbdGroup

属性	类型	默认值	说明
`className`	`string`	`—`	Additional CSS class names
`children`	`React.ReactNode`	`—`	Multiple Kbd elements forming a shortcut