Toggle

A two-state icon button that stays pressed or unpressed when clicked.

Basic

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { Star } from "lucide-react";

export default function BasicDemo() {
  return <Toggle magnitude="md" aria-label="Favorite" icon={<Icon icon={Star} />} />;
}

Sizes

The magnitude axis (sm, md, lg) scales both the button and its glyph.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { Star } from "lucide-react";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Toggle magnitude="sm" aria-label="Favorite (small)" icon={<Icon icon={Star} />} />
      <Toggle magnitude="md" aria-label="Favorite (medium)" icon={<Icon icon={Star} />} />
      <Toggle magnitude="lg" aria-label="Favorite (large)" icon={<Icon icon={Star} />} />
    </div>
  );
}

States

A toggle can start pressed via defaultPressed, and a disabled toggle does not respond to clicks.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { Star } from "lucide-react";

export default function StatesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Toggle magnitude="md" aria-label="Off" icon={<Icon icon={Star} />} />
      <Toggle magnitude="md" defaultPressed aria-label="On" icon={<Icon icon={Star} />} />
      <Toggle magnitude="md" disabled aria-label="Disabled" icon={<Icon icon={Star} />} />
    </div>
  );
}

Controlled

Own the state with pressed and onPressedChange to derive the glyph from it.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { Heart } from "lucide-react";
import * as React from "react";

export default function ControlledDemo() {
  const [pressed, setPressed] = React.useState(false);
  return (
    <Toggle
      magnitude="md"
      aria-label="Favorite"
      pressed={pressed}
      onPressedChange={setPressed}
      icon={<Icon icon={<Heart fill={pressed ? "currentColor" : "none"} />} />}
    />
  );
}

Installation

import { Toggle } from "@makeplane/propel/components/toggle";

Props

Toggle

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ToggleState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude	"sm" \| "md" \| "lg"	No	Size override. Inside a `ToggleGroup` the group's `magnitude` is used (so you can omit it); standalone it defaults to `md`.
icon	ReactNode	Yes	Icon element rendered inside the toggle, usually `<Icon icon={...} />`.