组件 · 数据展示

Kbd

A keyboard key or shortcut shown as a hint, in Space Mono inside a hairline box — in menus, tooltips, the search trigger and inputs.

稳定也叫 Keyboard shortcut, Shortcut, KbdGroup

import { Kbd } from "@botiverse/raft-ui";

本页尚未翻译

译文完成之前，这里显示英文原文。阅读英文版

Kbd shows a key or a shortcut as a hint: ⌘K, Esc, ⌫. It is quiet metadata beside something else, never a control of its own. It is set in text-mono-meta and foreground-hint, inside a line-hairline box.

When to use

Situation	Use
The shortcut of a menu item	`DropdownMenuShortcut` or `ContextMenuShortcut`, which are Kbd (DropdownMenu)
The shortcut of an icon button, in its tooltip	Kbd inside `TooltipContent`, after the text (Tooltip)
The shortcut that opens search	`SearchTriggerShortcut` (Search)
The shortcut that focuses an input	Kbd in an `InputGroupAddon` at the end of an InputGroup
A key or a shortcut named in running text	Kbd
Code, a command or a file name	InlineCode

Anatomy

Kbd: one key, or a whole shortcut written as one string (⌘C). It renders a kbd.
KbdGroup: holds several Kbd, 4px apart, for a shortcut written key by key. Optional.

Behavior

Kbd ignores the pointer and can't be selected: a click goes to the row or the button it sits in.
Inside a tooltip, Kbd switches to the tooltip's foreground-on-hud colors.

Content

Write modifier and editing keys as their symbols, and named keys as their names: ⌘K, ⌫, Esc. Search and tooltips write ⌘K the same way.
Let the label beside it say what the shortcut does. Kbd is a hint, not the label.

Accessibility

Kbd renders the native kbd element and adds no role.
Symbols are read inconsistently by screen readers. When a KbdGroup spells a shortcut with symbols, give it an aria-label that says it in words: Command K.

Rules

Never make Kbd clickable, and never use it as the label of a button.
Put Kbd at the end of what it belongs to: after a menu item's label, after a tooltip's text.

API

Kbd, KbdGroup

接受其元素的全部属性。