Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Kbd
An outline button with keyboard shortcut display combining border styling with command key visibility
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Borders teach shortcutsāoutline buttons surface power-user commands. This React outline button combines shadcn/ui's border-only styling with the Kbd component displaying keyboard commands like āK or Ctrl+S within bordered secondary actions. Built with gap-2 spacing maintaining subtle visual hierarchy while educating users on efficient workflows, it creates discoverable shortcut patterns. Perfect for "Settings ā," in application menus where outline signals optional navigation, "Search āK" in secondary toolbars requiring clear shortcut visibility without primary emphasis, or "Toggle Sidebar āB" in IDE-like interfaces teaching keyboard efficiencyāthe bordered shortcut combination maintains secondary action hierarchy while surfacing power-user features.
Pattern created by @haydenbleasel