XDS — Design System

XDSKbd@xds/core · Kbd

Usage

Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.

Best practices

Guidance	Practices
Do	Place shortcuts near the action they trigger — in a tooltip, menu item, or inline instruction.
Do	Use mod instead of ctrl or cmd — it automatically adapts to the user's platform.
Don't	Use Kbd as the only way to discover an action — shortcuts should supplement visible controls, not replace them.

Import

ts
import {XDSKbd} from '@xds/core/Kbd'

Props

Prop	Type	Description
keysrequired	string	Keyboard shortcut string. Use "+" to separate keys. Special keys: mod (Cmd on Mac), ctrl, alt, shift, enter, backspace, escape, tab, up, down, left, right.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.
className	string	CSS class name for the root element. Prefer xstyle for styling — className is provided for integration with non-StyleX systems.
style	CSSProperties	Inline styles for the root element. Prefer xstyle for styling — inline styles bypass StyleX optimization.

Examples

Common configurations, variations, and states.

Kbd — Inline InstructionsKeyboard shortcuts rendered inline within instructional text

tsx
'use client';
import {XDSKbd} from '@xds/core/Kbd';
import {XDSVStack} from '@xds/core/Stack';
import {XDSText} from '@xds/core/Text';
export default function KbdInlineInstructions() {
  return (
    <XDSVStack gap={3}>
      <XDSText type="body">
        Press <XDSKbd keys="mod+k" /> to open the command palette.
      </XDSText>
      <XDSText type="body">
        Use <XDSKbd keys="mod+shift+p" /> to access all commands.
      </XDSText>
      <XDSText type="body">
        Press <XDSKbd keys="escape" /> to close the dialog.
      </XDSText>
      <XDSText type="body">
        Navigate with <XDSKbd keys="up" /> and <XDSKbd keys="down" /> arrow
        keys, then press <XDSKbd keys="enter" /> to select.
      </XDSText>
    </XDSVStack>
  );
}

Kbd — Menu ShortcutsMenu-style list pairing action labels with their keyboard shortcuts

tsx
'use client';
import {XDSKbd} from '@xds/core/Kbd';
import {XDSCard} from '@xds/core/Card';
import {XDSList, XDSListItem} from '@xds/core/List';
const menuItems = [
  {label: 'Cut', keys: 'mod+x'},
  {label: 'Copy', keys: 'mod+c'},
  {label: 'Paste', keys: 'mod+v'},
  {label: 'Undo', keys: 'mod+z'},
  {label: 'Redo', keys: 'mod+shift+z'},
] as const;
export default function KbdMenuShortcuts() {
  return (
    <XDSCard padding={0}>
      <XDSList density="compact">
        {menuItems.map(item => (
          <XDSListItem
            key={item.label}
            label={item.label}
            endContent={<XDSKbd keys={item.keys} />}
          />
        ))}
      </XDSList>
    </XDSCard>
  );
}

Kbd — Modifier CombinationsModifier combinations and special keys rendered as shortcut badges

tsx
'use client';
import {XDSKbd} from '@xds/core/Kbd';
import {XDSVStack, XDSHStack} from '@xds/core/Stack';
import {XDSText} from '@xds/core/Text';
export default function KbdModifierCombos() {
  return (
    <XDSVStack gap={3}>
      <XDSHStack gap={4}>
        <XDSKbd keys="mod+k" />
        <XDSKbd keys="shift+enter" />
        <XDSKbd keys="ctrl+c" />
        <XDSKbd keys="alt+tab" />
      </XDSHStack>
      <XDSHStack gap={4}>
        <XDSKbd keys="mod+shift+z" />
        <XDSKbd keys="ctrl+alt+delete" />
        <XDSKbd keys="mod+shift+p" />
      </XDSHStack>
      <XDSHStack gap={4}>
        <XDSText type="body">Special keys:</XDSText>
        <XDSKbd keys="escape" />
        <XDSKbd keys="enter" />
        <XDSKbd keys="backspace" />
        <XDSKbd keys="tab" />
        <XDSKbd keys="space" />
      </XDSHStack>
    </XDSVStack>
  );
}

Showcase source

tsx
'use client';
import {XDSKbd} from '@xds/core/Kbd';
export default function KbdShowcase() {
  return <XDSKbd keys="mod+k" />;
}