Kbd

When to use

Kbd shows a shortcut or a key to press: in menu items, tooltips and help text.

When not to use

• To show code or a command: Use the code text style.
• As a clickable element: Kbd is not interactive; use a Button.
• As a placeholder when there is no shortcut: Do not draw an empty key.

Anatomy

CtrlControl+K

LightDark

Copy code

import { Kbd, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Kbd keys={['mod', 'K']} />
    </Provider>
  );
}

1. Key: an inner <kbd>; a flat key on a muted fill, without a border.
2. Separator: a visual + between keys; screen readers skip it.
3. Container: the outer <kbd> around the combination.

Behaviour

• mod, ctrl, shift, alt, enter, escape, tab, backspace and the four arrows are named.
• Any other text (K, F2) shows and is read as written.
• The platform is detected in the browser; the server renders other. Fix it with platform.
• On keys that show a symbol, the symbol is hidden and visually hidden text carries the name.

Guidelines

• Give the keys in press order: modifiers first.
• Write letters in capitals: K, S.
• Show at most one shortcut per item.

Content

• The spoken names of named keys are library strings.

Turkish	English
Komut	Command
Yukarı ok	Up arrow
Sekme	Tab

Related components

• Tooltip: shows the shortcut in a tooltip.
• Button: an action that has a shortcut.