Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Small Toggle Group
A small toggle group with size sm and type multiple for compact text formatting toolbars with outline variant styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Cramped mobile toolbars need every pixel—but multiple formatting options are still essential. This React toggle group pattern uses size sm with type multiple for compact multi-select controls with Lucide React icons. Built with shadcn/ui ToggleGroup and Radix UI primitives with outline variant borders, the small grouped toggles maximize formatting density—perfect for mobile rich text editors, inline formatting bars, compact comment editors, space-constrained toolbars, or any interface where fitting bold-italic-underline controls in minimal space enables complete text formatting without sacrificing screen real estate.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Size Toggle Group
Standard medium-sized toggle group
Large Toggle Group
Large toggle group for prominent controls
Small Toggle
Individual small toggle button
Basic Toggle Group
Simple toggle group pattern
Small Button Group
Grouped small buttons
Compact Toolbar
Dense toolbar with small controls
Questions you might have
React Short Textarea
Compact textarea with rows={3} and min-h-0 limiting height to three lines for space-efficient multi-line input in dense layouts
React Default Size Toggle Group
A default medium-sized toggle group without size prop using type multiple for standard text formatting toolbars with outline variant