Shadcn.io is not affiliated with official shadcn/ui
Outline Toggle
Outline variant toggle button with border-only styling for subtle pressed state using variant="outline" with transparent background until active
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.
Outline Toggle preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Default Toggle
Default toggle button with icon-only display for binary on/off state using standard shadcn/ui styling with pressed state management
Disabled Toggle
Disabled toggle button with non-interactive state using disabled prop for grayed-out appearance with opacity-50 and cursor-not-allowed styling