Shadcn Toggle Examples: Pressed-State Buttons for React Toolbars
A toggle is a two-state button that can be either on or off, the control behind bold buttons in editors and filter chips in dashboards. The shadcn toggle component tracks pressed state with correct aria-pressed semantics and styles both states with Tailwind CSS, giving you a react toggle button that reads clearly in default and outline variants across all three sizes.
This page lines up 7 toggle examples: Toggle 1 through Toggle 5 for individual buttons with icons, text, and outline styles, plus Single and Multiple variants that graduate into grouped selection. Each example is TypeScript and conforms to Radix UI and Base UI state conventions.
Key features
- Accessible pressed state: The button exposes aria-pressed, so screen readers announce on and off without extra markup.
- Default and outline variants: A subtle ghost style suits dense toolbars while outline gives standalone toggles a visible boundary.
- Three sizes: Small, default, and large sizes align with the button scale for consistent toolbar heights.
- Icon and text friendly: Icon-only toggles, text labels, and combined layouts all keep correct spacing automatically.
- Controlled or uncontrolled: Use pressed with onPressedChange to bind state, or defaultPressed for local behavior.
Best practices
- Make state visible at a glance: The pressed background must contrast clearly with the idle state, especially for icon-only toggles.
- Add labels to icon toggles: Provide an aria-label like Toggle bold on icon-only buttons so the purpose is announced.
- Reserve toggles for modes: Use a toggle for persistent modes like showing a grid, and a plain button for one-shot actions.
- Group exclusive options: When only one option can be active, use a single-selection toggle group instead of coordinating separate toggles.
- Do not confuse toggle with switch: Settings rows belong to the switch. Toggles live in toolbars and content areas as pressed tools.
Common use cases
Rich text toolbars are the canonical example: bold, italic, and underline are independent toggles, while alignment is an exclusive group. Dashboards use toggles as filter chips, showing archived items or switching a panel between chart and table view, and map interfaces toggle layers on and off.
The Single and Multiple examples on this page step into the toggle group component, which coordinates selection across a set. Pairing an icon toggle with a tooltip explains its meaning on hover, and a full editor toolbar composes toggles with a button group and separators, patterns you can see assembled in our blocks collection.
Toggle, switch, or checkbox
These three controls encode the same boolean differently. A switch belongs in settings rows with instant effect, a checkbox belongs in forms, and a toggle is a pressed tool button. Choosing by context keeps your interface predictable for both users and screen readers.
Radix UI and Base UI support
The default component wraps the Radix UI Toggle primitive, which manages pressed state and aria attributes. Base UI ships a matching Toggle that follows the same data-state conventions, so the Tailwind CSS classes documented in the shadcn/ui toggle docs style either primitive, and every example on this page behaves identically on both.