Shadcn Toggle Outline

Toggle buttons with outline variant. Built with the Toggle component. A free, open source shadcn toggle example you can install with npx shadcn@latest add @reui/c-toggle-2 and edit as your own code.

Toggle buttons with outline variant.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: Outline toggles that pair an icon with a text label, Italic and Bold, both off on load

When to use

Editor formatting controls that stay pressed, such as bold, italic, underline and strikethrough
Reaction and save controls, such as like, retweet, share and bookmark, with or without a count
Media and app controls with an on and off state, such as mute, pin to sidebar or a notifications bell

When not to use

A one time action such as Save, Send or Delete that keeps no pressed state: use the Button component
Related actions joined edge to edge into one strip, such as playback or zoom controls: use the Button Group component
A set of options read as one value and crossed with arrow keys, such as text alignment: use the Toggle Group component

Agent notes

Pressed state lives inside each Toggle or a local useState and nothing saves it; read changes from onPressedChange to persist them
Every Toggle here is named by aria-label, which wins over its visible text for screen readers, so update both when relabelling

Markdownhttps://reui.io/components/toggle/c-toggle-2.md

MCPget_example("c-toggle-2")

Installnpx shadcn@latest add @reui/c-toggle-2

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Toggle Outline

Toggle

About Shadcn Toggle Outline

Toggle buttons with outline variant. Built with the Toggle component. A free, open source shadcn toggle example you can install with npx shadcn@latest add @reui/c-toggle-2 and edit as your own code.

What You Can Build With Shadcn Toggle Outline

Composes Toggle, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-toggle-2
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Toggle Examples

Basic Basic toggle.
Text Sizes Toggle buttons in different sizes.
Button Comparison Toggle with button and icon.
Disabled Text Disabled toggle.
Icon & Label Toggle with icon.
Count Badge Toggle with notification count badge
Icon Sizes Toggle size variants showcase
Icon Swap Toggle with icon swap on press
Label Swap Toggle with text label that changes
Reactions Social media reaction toggles
Tooltip Toggle with tooltip
Disabled Icons Disabled toggle states

Related Shadcn Component Categories

Toggle Group
Open-source shadcn toggle group components for view switches, toolbar options, and mutually exclusive actions.
Tooltip
Open-source shadcn tooltip components for inline hints, contextual guidance, and helper text.
Tree
Open-source shadcn tree components for file explorers, nested navigation, and hierarchical data.
Accordion
Open-source shadcn accordion components for FAQ layouts, settings panels, and help sections.
Alert
Open-source shadcn alert components for status messages, warning banners, and destructive notices.
Alert Dialog
Open-source shadcn alert dialog components for delete confirmations, destructive actions, and critical decisions.

Frequently Asked Questions

When should I use Shadcn Toggle Outline?

Use it for outline toggles that pair an icon with a text label, Italic and Bold, both off on load.

Shadcn Toggle as a whole fits:

Editor formatting controls that stay pressed, such as bold, italic, underline and strikethrough
Reaction and save controls, such as like, retweet, share and bookmark, with or without a count
Media and app controls with an on and off state, such as mute, pin to sidebar or a notifications bell

For a one time action such as Save, Send or Delete that keeps no pressed state, use the Button component. For related actions joined edge to edge into one strip, such as playback or zoom controls, use the Button Group component. For a set of options read as one value and crossed with arrow keys, such as text alignment, use the Toggle Group component.

How do I install Shadcn Toggle Outline?

Run npx shadcn@latest add @reui/c-toggle-2. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Toggle Outline free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Toggle Outline use?

It composes Toggle. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.