Shadcn.io is not affiliated with official shadcn/ui
Small Toggle Group
A small toggle group with size sm and type multiple for compact text formatting toolbars with outline variant styling
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.
Small Toggle Group preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Large Toggle Group
A large toggle group with size lg and type multiple for prominent text formatting controls with generous touch targets and outline variant
Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles