Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Default Toggle
Default toggle button with icon-only display for binary on/off state using standard shadcn/ui styling with pressed state management
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Toolbar buttons need clear pressed states—bold, italic, underline in rich text editors—users need to see what's active. This React toggle uses shadcn/ui and Radix UI with uncontrolled state managing pressed/unpressed automatically via click. Built with Lucide React BoldIcon and aria-label for accessibility, icon-only toggles create compact toolbars—perfect for text formatting, view options, filter toggles, settings switches, or any interface where space-efficient binary controls with clear visual feedback matter more than verbose labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toggle with Text
Icon with text label for clarity
Outline Toggle
Outline variant styling
Disabled Toggle
Non-interactive disabled state
Default Button
Standard button without toggle state
Default Switch
Alternative binary control
Default Checkbox
Checkbox for selection state