Shadcn.io is not affiliated with official shadcn/ui
Button with Kbd
An outline button with keyboard shortcut display combining border styling with command key visibility
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.
Button with Kbd preview
Installation
Related Components
Standard Outline
Basic border button without shortcut
Outline with Icon
Border button with left icon
Primary with Kbd
Keyboard shortcut on filled button
Link with Kbd
Keyboard shortcut on minimal button
Standard Kbd
Standalone keyboard shortcut display
Outline with Count
Border button with badge
FAQ
Was this page helpful?
Sign in to leave feedback.