Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Disabled Toggle Group
Disabled toggle group with non-interactive state using disabled prop applying opacity-50 and cursor-not-allowed to all items simultaneously
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes entire toolbars aren't available—loading states, insufficient permissions, incompatible document modes—users need to see unavailable controls. This React toggle group uses shadcn/ui's disabled prop on the group level with Radix UI applying opacity-50 and cursor-not-allowed to all items automatically—grayed out toolbar signals unavailability clearly. Built with Lucide React formatting icons in connected pill layout, disabled toggle groups stay visible but non-interactive—perfect for conditional formatting options, permission-restricted features, loading placeholders, read-only modes, or any interface where showing unavailable grouped controls with clear visual feedback matters more than hiding them completely.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toggle Group
Interactive enabled multiple selection
Outline Toggle Group
Outline variant styling
Single Selection Toggle Group
Radio button behavior
Disabled Toggle
Single disabled toggle button
Button Group
Grouped button controls
Toolbar
Complete toolbar component