Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Small Toggle
A small toggle button with size sm prop and BoldIcon from Lucide React for compact text formatting toolbars
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Space is tight in mobile toolbars and inline editors—every pixel counts. This React toggle pattern uses size sm for compact toggle buttons with Lucide React icons. Built with shadcn/ui Toggle component and Radix UI primitives, the small size fits more formatting controls in limited space—perfect for mobile rich text editors, compact toolbars, inline formatting bars, comment editors, or any interface where dense controls maximize available formatting options without overwhelming narrow layouts or small screens.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Size Toggle
Standard medium-sized toggle button
Large Toggle
Large toggle button for prominent controls
Small Toggle Group
Group of small toggle buttons
Small Button
Small button size variant
Basic Toggle
Simple toggle button pattern
Formatting Toolbar
Rich text formatting toolbar
Questions you might have
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
React Default Size Toggle
A default medium-sized toggle button without size prop and ItalicIcon from Lucide React for standard text formatting controls