shadcn.io is not affiliated with official shadcn/ui
People press save out of habit, even in apps that save on their own. This React example shows ⌘ and S in a KbdGroup, which spaces the two caps evenly and marks them as one shortcut. Put it next to a Save button or in an editor's menu, and show Ctrl S instead on Windows and Linux.
Preview
Installation
FAQ
Why is ⌘S save in every app?
S for save was set early by the Macintosh's standard File menu, and Windows followed with Ctrl S. Decades of habit made it one of the shortcuts people press without thinking.
Is it ⌘S on Mac and Ctrl S everywhere else?
Yes: ⌘S on macOS, Ctrl S on Windows, Linux and ChromeOS. Show the one that matches the user's platform, as the Platform-Aware Shortcut example does.
Should a web app with autosave still handle ⌘S?
Yes. Without a handler, the browser opens its own Save Page dialog, which is never what someone in your editor wants. Handle it with a keydown listener and preventDefault, then save now or confirm that everything is already saved.
What should people see after pressing ⌘S?
A short confirmation: Saved in the toolbar, a check on the Save button or a toast. If saving takes time, show progress, and if it fails, say so and keep the changes.
Should ⌘S do nothing when there's nothing to save?
Still catch it so the browser's dialog doesn't open, and confirm that everything is saved. Disabling the Save button is fine; ignoring the shortcut silently isn't.
Can people save without the shortcut?
They must be able to: always offer a visible Save Button or menu item. The key caps next to it teach the shortcut to people who want it.
Related
- Copy Shortcut KbdThe Ctrl C copy shortcut as a key group
- Paste Shortcut KbdThe Ctrl V paste shortcut as a key group
- Command Palette Shortcut KbdThe ⌘K shortcut that opens a command
- Complex Shortcut KbdA three-key Ctrl Shift P shortcut in one
- Button with Text (Standard)The one filled action
- Arrow Keys Cross Pattern KbdFour arrow keys in the inverted T of a