Kbd

1<div class="hstack gap-4">2  <button type="button" class="outline">3    Save4    <kbd>S</kbd>5  </button>6  <input placeholder="Press ⌘K…" />7</div>8 

1<mo-dropdown>2  <button type="button" popovertarget="kbd-menu" class="outline">Shortcuts</button>3  <menu popover id="kbd-menu">4    <button role="menuitem" type="button">5      Undo6      <span data-shortcut>⌘Z</span>7    </button>8    <button role="menuitem" type="button">9      Redo10      <span data-shortcut>⇧⌘Z</span>11    </button>12    <hr />13    <div data-label>View</div>14    <button role="menuitem" type="button">15      Zoom In16      <span data-shortcut>⌘+</span>17    </button>18  </menu>19</mo-dropdown>20 

1<p class="text-light">2  Use3  <span class="hstack gap-1"><kbd>Ctrl + B</kbd><kbd>Ctrl + K</kbd></span>4  to open the command palette5</p>6 

1<div class="vstack gap-4" style="max-width: 20rem;">2  <div data-input-group>3    <span data-addon>4      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>5    </span>6    <input placeholder="Search..." aria-label="Search" />7    <span data-addon><kbd>&#8984;</kbd><kbd>K</kbd></span>8  </div>9  <div data-input-group>10    <input placeholder="Filter issues…" aria-label="Filter issues" />11    <span data-addon><kbd>&#8984;P</kbd></span>12  </div>13</div>14 

1<p class="text-light">Hover a button: the tooltip names the action, the key cap shows its shortcut.</p>2<div class="hstack gap-2">3  <button type="button" class="outline" title="Save Changes (S)">4    Save5    <kbd>S</kbd>6  </button>7  <button type="button" class="outline" title="Print Document (Ctrl P)">8    Print9    <kbd>P</kbd>10  </button>11</div>12