Shadcn.io is not affiliated with official shadcn/ui
Disabled Toggle
Disabled toggle button with non-interactive state using disabled prop for grayed-out appearance with opacity-50 and cursor-not-allowed styling
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.
Disabled Toggle preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Outline Toggle
Outline variant toggle button with border-only styling for subtle pressed state using variant="outline" with transparent background until active
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