Pesto UI

Toggle

A two-state button — pressed or not. For a formatting mark or a view option that is either on or off, where a Switch would be too heavy.

tsx
import { Toggle } from "@pestoui/core"

Variants

The default is a ghost button that fills when pressed. outline gives it a resting border, for a toggle that sits alone on a surface.

Sizes

Three heights — 36, 40 and 44px. An icon-only toggle needs an aria-label.

Props

PropTypeDefaultDescription
pressed / defaultPressedboolean—Controlled or uncontrolled pressed state.
onPressedChange(pressed: boolean) => void—Fires when the state changes.
variant"default" | "outline""default"Ghost, or bordered on a card fill.
size"sm" | "default" | "lg""default"Height and minimum width: 36, 40 or 44px.
disabledboolean—Blocks interaction and dims the control.
PreviousToastNext Toggle Group

Pesto UI · 117 documented components