Skip to main content

KbdGroup

Display a multi-key shortcut with shared styling.

View as MarkdownSource Code

Use KbdGroup to display keys pressed together, such as Ctrl + K. It renders notation only; the application owns the shortcut listener.

Basic usage#

import { KbdGroup } from 'moraine'

export function Example() {
  return <KbdGroup items={['Ctrl', 'K']} />
}

Playground#

Quick save:Ctrl+⇧+S
Props
Slots

Anatomy#

KbdGroup [component; slot=root; <kbd>]
└── item [slot]

Separator content is inline and is not a theme slot.

Usage#

The separator accepts string or number shorthand for inline shortcut notation such as "+". For custom JSX, pass a renderer that receives the separator index; each position mounts its own instance. It is unrelated to the standalone layout Separator.

import { KbdGroup } from 'moraine'

export function CustomSeparator() {
  return (
    <KbdGroup
      items={[{ value: 'Ctrl', label: 'Control' }, 'Shift', 'K']}
      separator={() => <span class="text-muted-foreground">/</span>}
    />
  )
}

Key labels#

Use known key aliases for symbol notation, or supply item labels when the displayed shortcut needs platform-specific wording. Shortcut registration remains application-owned.

import { KbdGroup } from 'moraine'

export function KbdGroupUsage() {
  return (
    <div class="flex flex-col gap-3">
      <div class="flex gap-2 items-center">
        <span class="text-sm text-muted-foreground">Save document:</span>
        <KbdGroup items={['meta', 's']} />
      </div>
      <div class="flex gap-2 items-center">
        <span class="text-sm text-muted-foreground">Format document:</span>
        <KbdGroup items={['shift', 'alt', 'f']} />
      </div>
    </div>
  )
}

Props#

Props for the KbdGroup component. Renders a <kbd> element by default.

Prop