Marble UI
← Components

Kbd

Preview: Outline

Keyboard key or shortcut, e.g. ⌘ K.

Import

import { Kbd } from '@marbleui/ui'

Props

<Kbd>

PropTypeDefaultDescription
variant'soft' | 'outline''outline'

Also accepts HTML element props (278).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Keyboard. Follow the primitive's docs for the full keyboard map.

Usage notes

Visual keyboard key or shortcut hint. It only displays a shortcut; it does not register one.

Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search
  • One Kbd per key; place several side by side for a combination.
  • variant is outline (default) or soft.
  • It renders the semantic kbd element through React Aria’s Keyboard.
  • Glyphs like ⌘ may be read inconsistently by screen readers; where the shortcut matters, also state it in text or an aria-keyshortcuts attribute on the control.
Example source · show
import { Kbd } from './kbd'

export const styles = {
  Outline: () => (
    <div className="flex items-center gap-1 text-sm text-fg-muted">
      Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search
    </div>
  ),
  Soft: () => (
    <div className="flex items-center gap-1 text-sm text-fg-muted">
      <Kbd variant="soft">Shift</Kbd>+<Kbd variant="soft">Enter</Kbd> for a new line
    </div>
  ),
}

Source: packages/ui/src/kbd/kbd.tsx

Catalog

Category
typography
Priority
Foundation
Primitive
custom
React Aria
Keyboard