Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Disabled Toggle
Disabled toggle button with non-interactive state using disabled prop for grayed-out appearance with opacity-50 and cursor-not-allowed styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes formatting options aren't available—premium features locked, incompatible states, loading conditions—users need to see unavailable controls. This React toggle uses shadcn/ui's disabled prop with Radix UI applying opacity-50 and cursor-not-allowed automatically—signaling this option isn't clickable right now. Built with Lucide React UnderlineIcon and aria-label maintaining accessibility, disabled toggles stay visible in toolbars—perfect for conditional formatting, permission-restricted features, incompatible state indicators, loading placeholders, or any interface where showing unavailable options with clear visual feedback matters more than hiding them completely.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toggle
Interactive enabled toggle
Outline Toggle
Outline variant styling
Disabled Button
Disabled button state
Disabled Switch
Disabled switch control
Disabled Input
Disabled input field
Disabled Checkbox
Disabled checkbox state
Questions you might have
React Outline Toggle
Outline variant toggle button with border-only styling for subtle pressed state using variant="outline" with transparent background until active
React Toggle with Text
Toggle button with icon and text label combining Lucide React icon with visible text for improved clarity and accessibility without aria-label