Shadcn Toggle
React toggle for two-state toolbar buttons and filters. Built with TypeScript and Tailwind CSS for Next.js using Base UI — pressed state, outline, sizes, and RTL.
A toggle is a button that stays pressed. Click it again and it pops back. Use it for bold, a bookmark, or a view mode — anything that is on or off and should look like a button, not a switch.
Looking for a neobrutalism version for shadcn?
Same toggle, thicker borders. The NeoBrutalism toggle is the kit if you want that look.
Usage
import { BookmarkIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
<BookmarkIcon />
Bookmark
</Toggle>pressed plus onPressedChange make it controlled. Leave them off and it keeps its own state.
Composition
Icon and text are children. toggleVariants is exported if you need the same look elsewhere.
Outline
variant="outline" puts a border on the idle state so the control does not vanish into the page.
With Text
An icon plus a word. The word is the accessible name if you skip aria-label.
Size
sm, default, or lg. Match the controls around it.
Disabled
disabled greys it out and blocks the press. It stays in the row so the gap is obvious.
RTL
Wrap with DirectionProvider and dir="rtl". The icon and label flip with the reading direction.
API
Prop
Type
data-state is "on" or "off". data-disabled is present when disabled.
Keyboard
| Key | Action |
|---|---|
Space | Toggle the pressed state |
Enter | Toggle the pressed state |
Notes
Name every icon-only toggle
aria-label="Toggle bold" — not a bare icon. Visible text is enough when the label is in the button.
Several related toggles belong in a Toggle Group.
With other components
Several stay in one row
TooltipLabel an icon-only toggle
ButtonMix actions with state
SeparatorSplit a formatting bar
KbdShortcut next to it
TextareaBar above the editor
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Toast
React toast for save confirms, undo, and async status. Built with TypeScript and Tailwind CSS for Next.js using Base UI — stacked, swipe to dismiss, promise states.
Toggle Group
React toggle group for formatting toolbars and view switchers. Built with TypeScript and Tailwind CSS for Next.js using Base UI — single or multiple, outline, and RTL.