videorc/uiToggle
A two-state button on Base UI at the 28 px desktop height. Pressed wears the chrome plate, the same material as a selected segment and an active tab.
Installation
$ pnpm dlx shadcn@latest add @videorc/toggleUsage
import { Toggle } from "@/components/ui/toggle";<Toggle aria-label="Keep on top">
<PinIcon />
</Toggle>Examples
Outline and compact
outline draws a hairline around the toggle, for one that sits beside fields. xs (24 px) is for dense rows only. Control it with pressed and onPressedChange when the app owns the state.
Theming
| Token or attribute | Meaning |
|---|---|
chrome-plate | The pressed fill, keyed off data-pressed |
bg-muted | Hover. The plate means pressed, never hovered |
text-muted-foreground, text-foreground | Resting and pressed text |
h-control | The 28 px desktop control height |
data-pressed, data-disabled | Base UI's state attributes, for styling from outside |
Keyboard
| Key | Action |
|---|---|
Space, Enter | Presses or releases the toggle |
Tab | Moves focus to the next control |
Accessibility
Base UI renders a <button> with aria-pressed, so the state is announced on its own. An icon-only toggle needs an aria-label that stays the same in both states ("Keep on top", never "Unpin"). A toggle is for a mode the user turns on and off; choosing one value among a few is Segmented control, and a setting that applies at once is a Switch.
API reference
Every Base UI Toggle prop, plus:
Prop
Type
toggleVariants({ variant, size }) returns the classes, for an element styled as a toggle.
Slider
A slider on Base UI with a chrome-fill range and chrome-bead thumbs. Its name and spoken value go on the thumbs, where a screen reader reads them.
Toggle Group
Filter chips on Base UI. Pressed items wear the chrome plate, a Field's label names the group, and items can sit apart, wrap, or join into one outlined strip.