Kbd

Display one keyboard key as shortcut notation.

Use Kbd to display one key in a shortcut hint. Combine keys with KbdGroup; showing a shortcut does not register a keyboard handler.

Basic usage#

import { Kbd } from 'moraine'

export function Example() {
  return <Kbd value="K" />
}

Playground#

Anatomy#

Kbd [component; slot=root; <kbd>]

Usage#

Root styling#

Kbd renders one <kbd> root, so use direct class and style props for an individual keycap. Configure kbd.base.root in your Theme to share keycap presentation; classes and styles are reserved for components with multiple rendered slots.

import { Kbd, MoraineProvider } from 'moraine'
import { defineTheme } from 'moraine/theme'

const theme = defineTheme({
  kbd: { base: { root: 'rounded-none' } },
})

export function RootStyling() {
  return (
    <div class="w-full space-y-6">
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Instance class and style</p>
        <Kbd value="K" class="text-blue-600" style={{ 'border-radius': '8px' }} />
      </div>
      <MoraineProvider theme={theme}>
        <div class="space-y-2">
          <p class="text-sm text-muted-foreground">Local Theme defaults</p>
          <Kbd value="K" />
        </div>
      </MoraineProvider>
    </div>
  )
}

Keyboard notation#

Use Kbd for a single key or keycap in instructional text. It conveys displayed keyboard notation; application-level shortcut registration and platform-specific behavior remain outside the component.

import { Kbd } from 'moraine'

export function KbdUsage() {
  return (
    <div class="flex flex-wrap gap-3 items-center">
      <span class="text-sm text-muted-foreground flex gap-1.5 items-center">
        Press <Kbd value="command" /> <Kbd value="k" /> to search
      </span>
      <span class="text-sm text-muted-foreground flex gap-1.5 items-center">
        Press <Kbd value="escape" /> to cancel
      </span>
    </div>
  )
}

Examples#

Shortcut composition#

import { Kbd } from 'moraine'

export function ShortcutComposition() {
  return (
    <p class="text-sm text-foreground flex flex-wrap gap-2 items-center">
      Close dialogs with
      <Kbd value="escape" />
    </p>
  )
}

Props#

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

PropTypeDefault