Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Large Toggle
A large toggle button with size lg prop and UnderlineIcon from Lucide React for prominent primary formatting controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some actions deserve emphasis—large touch targets command attention and improve accessibility. This React toggle pattern uses size lg for prominent toggle buttons with Lucide React icons. Built with shadcn/ui Toggle component and Radix UI primitives, the large size emphasizes primary actions—perfect for accessibility-focused interfaces, touch-first tablet apps, presentation mode controls, simplified editing interfaces, or any context where larger controls reduce interaction friction and make primary formatting actions immediately obvious and easy to activate with minimal precision.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Small Toggle
Compact small-sized toggle button
Default Size Toggle
Standard medium-sized toggle button
Large Toggle Group
Group of large toggle buttons
Large Button
Large button size variant
Basic Toggle
Simple toggle button pattern
Large Toolbar
Toolbar with large controls
Questions you might have
React Default Size Toggle
A default medium-sized toggle button without size prop and ItalicIcon from Lucide React for standard text formatting controls
React Default Toggle
Default toggle button with icon-only display for binary on/off state using standard shadcn/ui styling with pressed state management