Keyboard Shortcut

Key combination triggering an action.

html

<div class="kbs-demo" data-os="mac" style="--accent:#241430;--size:26px;">
  <div class="kbs-demo__row">
    <span class="kbs-demo__action">Save</span>
    <span class="kbs-demo__combo">
      <kbd class="kbs-demo__key kbs-demo__key--mac">&#8984;</kbd>
      <kbd class="kbs-demo__key kbs-demo__key--windows">Ctrl</kbd>
      <kbd class="kbs-demo__key kbs-demo__key--linux">Super</kbd>
      <span class="kbs-demo__plus">+</span>
      <kbd class="kbs-demo__key kbs-demo__key--letter">S</kbd>
    </span>
  </div>
</div>
<style>
.kbs-demo { width: 260px; font: 14px system-ui, sans-serif; color: #241430; }
.kbs-demo__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #24143010; }
.kbs-demo__combo { display: flex; align-items: center; gap: 4px; }
.kbs-demo__key { display: none; min-width: var(--size); height: var(--size); padding: 0 6px; border-radius: 6px; background: var(--accent); color: #FAF7F2; font: 700 12px ui-monospace, monospace; display: none; align-items: center; justify-content: center; }
.kbs-demo[data-os="mac"] .kbs-demo__key--mac { display: flex; }
.kbs-demo[data-os="windows"] .kbs-demo__key--windows { display: flex; }
.kbs-demo[data-os="linux"] .kbs-demo__key--linux { display: flex; }
.kbs-demo__key--letter { display: flex; }
.kbs-demo__plus { color: #241430aa; font-size: 12px; }
</style>

tailwind

<div class="kbs-tw kbs-tw--mac" style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  <div class="flex items-center justify-between px-3 py-2.5 rounded-lg bg-[#24143010]">
    <span>Save</span>
    <span class="flex items-center gap-1">
      <kbd class="kbs-tw__key kbs-tw__key--mac hidden items-center justify-center rounded-md font-mono font-bold text-xs" style="min-width:26px;height:26px;background:#241430;color:#FAF7F2">&#8984;</kbd>
      <kbd class="kbs-tw__key kbs-tw__key--windows hidden items-center justify-center rounded-md font-mono font-bold text-xs" style="min-width:26px;height:26px;background:#241430;color:#FAF7F2">Ctrl</kbd>
      <kbd class="kbs-tw__key kbs-tw__key--linux hidden items-center justify-center rounded-md font-mono font-bold text-xs" style="min-width:26px;height:26px;background:#241430;color:#FAF7F2">Super</kbd>
      <span class="text-xs text-[#241430aa]">+</span>
      <kbd class="flex items-center justify-center rounded-md font-mono font-bold text-xs" style="min-width:26px;height:26px;background:#241430;color:#FAF7F2">S</kbd>
    </span>
  </div>
</div>
<style>
.kbs-tw--mac .kbs-tw__key--mac { display: flex; }
.kbs-tw--windows .kbs-tw__key--windows { display: flex; }
.kbs-tw--linux .kbs-tw__key--linux { display: flex; }
</style>

react

export function KeyboardShortcut({
  action = "Save",
  os = "mac",
  accent = "#241430",
  size = 26,
}) {
  const modKey = { mac: "\u2318", windows: "Ctrl", linux: "Super" }[os];
  const keyStyle = { minWidth: size, height: size, padding: "0 6px", borderRadius: 6, background: accent, color: "#FAF7F2", fontFamily: "ui-monospace, monospace", fontWeight: 700, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" };
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", borderRadius: 8, background: "#24143010" }}>
        <span>{action}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
          <kbd style={keyStyle}>{modKey}</kbd>
          <span style={{ color: "#241430aa", fontSize: 12 }}>+</span>
          <kbd style={keyStyle}>S</kbd>
        </span>
      </div>
    </div>
  );
}