Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Outline Toggle Group
Outline variant toggle group with border-only styling using variant="outline" for subtle transparent appearance until items become active
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default toggle groups too bold for your minimal toolbar? Outline variant keeps it subtle—transparent backgrounds with borders—pressed items fill in. This React toggle group uses shadcn/ui's variant equals outline with type equals multiple for independent selections and Radix UI state management. Built with border-based visual hierarchy and Lucide React formatting icons in connected layout, outline toggle groups blend into clean interfaces—perfect for minimal text editors, secondary toolbars, subtle formatting controls, light-touch interfaces, or any design where understated toggles matter more than prominent solid fills.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toggle Group
Solid background default styling
Single Selection Toggle Group
Radio button behavior with type single
Disabled Toggle Group
Non-interactive disabled state
Outline Toggle
Single outline toggle button
Outline Button
Outline button styling
Outline Badge
Outline badge variant
Questions you might have
React Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles
React Single Selection Toggle Group
Single selection toggle group using type="single" for radio button behavior allowing only one active item with mutually exclusive choices