Kbd

Kbd elements for displaying keyboard key combinations.

Package: @solidiom/kbd
Version: 0.0.1-next.0
Status: stable

Examples

import * as Kbd from "@solidiom/kbd"

;<p>
  Press <Kbd.Root>Ctrl</Kbd.Root> + <Kbd.Root>K</Kbd.Root> to open the command menu.
</p>

Composition

Each Kbd.Root renders an independent <kbd> element. For multi-key shortcuts, use separate instances separated by text or operators.

⌘Kto open command palette

View source

        export function Root(props: KbdRootProps) {
  return (
    <kbd
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "kbd", part: "root" })}
    >
      {props.children}
    </kbd>
  )
}