For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/kbd.md.
A3S UI
  • English
  • next

      • Kbd

      Live previewHTML · CSS · JavaScript
      ⌘⇧⌥⌃Ctrl+B

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Kbd component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/components/button-group.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/components/kbd.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Kbd examples compose Button, Button Group, Input Group, and Tooltip styles.

      Using CDN or bundler imports? See the Installation page.

      Add your kbd HTML

      Use <kbd class="kbd"> for a key label. Use an inline wrapper with utilities when grouping multiple keys.

      <kbd class="kbd">⌘K</kbd>

      Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

      Examples

      Group

      Live previewHTML · CSS · JavaScript

      Use Ctrl+B Ctrl+K to open the command palette

      Button

      Live previewHTML · CSS · JavaScript

      Input Group

      Live previewHTML · CSS · JavaScript
      ⌘K

      RTL

      Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

      Live previewHTML · CSS · JavaScript
      ⌘⇧⌥⌃Ctrl+B