React Button Group - Contextual Toolbar
Contextual toolbar button group appearing on text selection for formatting actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Context-driven toolbars reduce interface noise—showing formatting controls only when text selected. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's BoldIcon, ItalicIcon, and UnderlineIcon for floating toolbars triggered by text selection. Built on React useState and window.getSelection() API, the toolbar conditionally renders based on selectedText.length. Perfect for rich text editors like Notion or Google Docs providing formatting on selection, note-taking apps like Evernote with contextual formatting, email composers with styling controls, or any text interface where formatting should appear on demand—conditional rendering prevents toolbar clutter, text selection trigger follows user intent, grouped formatting actions enable quick styling. The pattern follows modern editor conventions where formatting tools appear contextually rather than permanently occupying screen space.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-2.jsonRelated patterns you will also like
Loading States
Async action feedback
Basic Button Group
Simple grouped buttons
Toggle Group
Segmented toggle controls
Popover Component
Floating content
Outline Button
Border-style button variant
Tooltip Component
Hover explanations