shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Patterns
Contextual Toolbar Button Group for React
A formatting toolbar that appears when text in the box is selected, above a labeled Bold, Italic and Underline group.
A toolbar that only shows up when there's something to format. Select part of the sentence in the box and an icon-only Bold, Italic and Underline group appears below it; clear the selection and it goes away. The labeled group underneath is always visible, for comparison.
Preview
Installation
FAQ
How does the toolbar know text is selected?
The demo listens for the document's selectionchange event. When the selection starts inside the paragraph and isn't empty, the toolbar shows; otherwise it hides.
Does it work with keyboard selection?
Yes. selectionchange fires for mouse, touch and keyboard selections alike, wherever text can be selected.
How are the icon buttons named?
Each has an aria-label, Bold, Italic or Underline, and size="icon-sm". The group is labeled Format selection.
Do the buttons format the selection?
No. They have no handler. Call your editor's formatting command for the current selection.
How do I float the toolbar over the selection?
Read the selection's bounding rectangle and position the group there, or anchor a Popover to it. The demo places it under the paragraph.
Related
- Rich Text Toolbar Button GroupA rich text toolbar of icon buttons where
- Keyboard Shortcuts Button GroupCopy, Save and Export buttons that show
- Simple Text PopoverA button that opens a popover with a
- Simple TooltipAn outline button that shows a one-line
- Default Toggle GroupA toggle group for bold, italic and
- Loading States Button GroupButtons that disable themselves and