Key caps

The bk-kbd component renders keyboard keys as physical key caps. It inherits the code palette of the active skin, so it reads as terminal output in the terminal skin and as letterpress in paper — without touching a line of CSS.

Install

npm install bukalemun

Or paste the two CDN tags from the README and you are done. There is no third thing to configure.

Usage

Wrap any key label in a bk-kbd element. Sizes come in sm and lg; the quiet variant drops the cap background for inline prose.

Press Enter to continue, or Esc to bail out entirely.

Tip

Key caps inherit the code tokens. If a skin restyles its code blocks, the key caps follow automatically — that is the token contract doing its job.

Shortcut combos

Join key caps with the combo separator for full chords:

Action	Keys
Command palette	Ctrl+K
Save document	Ctrl+S
Cycle skin	Alt+T
Force quit	Ctrl+Alt+Del

Careful

The separator is decorative. Screen readers announce the keys in DOM order, so keep the markup order identical to the physical key order.

Theming API

The same page, two lines apart. Pick your side of the fence:

<html data-bk-style="vapor" data-bk-theme="dark">

The declarative route: set the attributes, forget the runtime even exists. Persistence still works if you ship no-flash.js.

bk.theme.setStyle('vapor');
bk.theme.toggle();      // light <-> dark
bk.theme.random();      // roulette

The imperative route: build a skin picker, a settings panel, or an easter egg. Your call.

That is the whole component. Small, boring, reliable — the way documentation components should be.