Toggle

A button that stays pressed: bold on, watching on. Two variants and three sizes. For a set of them, use Toggle group.

Installation

npx rasengan-ui add toggle

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/toggle.json

Usage

import { BoldIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";
 
export function Bold() {
  return (
    <Toggle aria-label="Bold">
      <BoldIcon />
    </Toggle>
  );
}

Variants and sizes

default is flat until pressed, then takes the accent grey; outline has the input's border; soft takes a wash of the primary when pressed, so the on state reads as the brand colour (with a border in Iwa). Sizes are sm, default and lg, the village's control heights.

<Toggle variant="outline" size="sm">Watching</Toggle>

Villages

Pressed, it takes the accent surface; the outline variant keeps the village's shadow, like an outline button.

Accessibility

• A <button> with aria-pressed; Space and Enter toggle it.
• An icon-only toggle needs an aria-label, which should not change with the state.

API reference

The props of Base UI's Toggle (pressed, defaultPressed, onPressedChange, disabled), plus:

toggleVariants({ variant, size }) returns the same classes.