Kbd·component·@astryxdesign/core

Kbd

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

Open in Playground @astryxdesign/core/Kbd

Showcases and examples

4 documented examples

Kbd

Kbd API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · kbd-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Kbd} from '@astryxdesign/core/Kbd';

export default function KbdShowcase() {
  return <Kbd keys="mod+k" />;
}

Usage

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

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

Typed props

Prop	Type and behavior
`keys`	`string` · required Keyboard shortcut string. Use "+" to separate keys. Special keys: mod (Cmd on Mac), ctrl, alt, shift, enter, backspace, escape, tab, up, down, left, right, plus. Aliases: esc for escape and return for enter.
`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.

Anatomy

Shortcut · required

Group that presents the complete keyboard shortcut and its accessible name.

Key badge · required

Painted key badge rendered once for each key in the shortcut.

Theming

Targets

astryx-kbd