Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Outline Toggle
Outline variant toggle button with border-only styling for subtle pressed state using variant="outline" with transparent background until active
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default toggles too bold for your minimal interface? Outline variant keeps it subtle—transparent background with border—pressed state fills in. This React toggle uses shadcn/ui's variant equals outline with Radix UI state management and Lucide React ItalicIcon for formatting control. Built with border-based visual hierarchy instead of solid fills, outline toggles blend into clean interfaces—perfect for light-touch toolbars, minimal text editors, secondary formatting options, sidebar controls, or any design where understated toggles matter more than prominent solid buttons.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toggle
Solid background default styling
Toggle with Text
Icon with text label
Disabled Toggle
Non-interactive disabled state
Outline Button
Outline button without toggle state
Outline Badge
Outline badge styling
Basic Card
Card with border styling
Questions you might have
React Default Toggle
Default toggle button with icon-only display for binary on/off state using standard shadcn/ui styling with pressed state management
React Disabled Toggle
Disabled toggle button with non-interactive state using disabled prop for grayed-out appearance with opacity-50 and cursor-not-allowed styling