shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Patterns
Keyboard Shortcuts Button Group for React
Copy, Save and Export buttons that show their keyboard shortcuts, in a row and in a vertical group.
Buttons that teach their shortcuts. Each label is followed by a Kbd key cap, ⌘C, ⌘S or ⌘E. In the row the cap follows the label; in the vertical group the label sits on the start side and the cap on the end, like a menu.
Preview
Installation
FAQ
Does pressing ⌘C trigger Copy?
No. Kbd only draws the keys. Register the shortcut in your own key handler and run the same action as the button.
How is the key cap spaced in the row?
It has ms-2, a margin on the start side, so it keeps its distance from the label in either reading direction.
How does the vertical group push the cap to the end?
Each button has justify-between. The icon and label are wrapped in one span, so there are two children and the cap goes to the far side.
Are the shortcuts announced?
Yes. The cap's text is inside the button, so Copy is read with ⌘C. Use aria-keyshortcuts on the button if you want assistive tech to know the shortcut too.
Related
- Overflow Menu Button GroupAction button groups that keep the main
- Rich Text Toolbar Button GroupA rich text toolbar of icon buttons where
- Vertical Button GroupTwo vertical button groups that stack
- Simple Command DialogA button that opens a command dialog with
- Simple TooltipAn outline button that shows a one-line
- Contextual Toolbar Button GroupA formatting toolbar that appears when