Shadcn.io is not affiliated with official shadcn/ui
Button with Kbd
A primary button with keyboard shortcut display combining filled background with command key urgency
Shortcuts accelerate conversions—primary buttons teaching efficiency while driving action. This React button combines shadcn/ui's solid primary styling with the Kbd component displaying keyboard commands like ⌘S or Ctrl+Enter within filled background. Built with gap-2 spacing and contrasting kbd styling maintaining high visibility while educating power users, it creates discoverable shortcut patterns on critical actions. Perfect for "Save ⌘S" in editors preventing data loss through muscle memory, "Submit ⌘Enter" in forms accelerating completion, or "Create New ⌘N" in productivity apps teaching workflow efficiency—the filled shortcut combination commands attention while surfacing keyboard optimization for conversion acceleration.
Button with Kbd preview
Installation
Related Components
Standard Primary
Basic filled button without shortcut
Primary with Icon
Filled button with left icon
Outline with Kbd
Keyboard shortcut on border button
Link with Kbd
Keyboard shortcut on minimal button
Standard Kbd
Standalone keyboard shortcut display
Primary with Count
Filled button with badge
FAQ
Was this page helpful?
Sign in to leave feedback.