XDS — Design System

Kbd@xds/core · XDSKbd v0.0.13

Usage

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

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

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.

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" />;
}

Usage

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

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

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.

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> ); }

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> ); }

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> ); }