Toggle

A single on/off button. Pressed uses the shared selected style.

Sourcecomponents/toggle.tsx

States

Outline and icon

Usage

Toggle usage

import { useState } from "react";import { Pin } from "lucide-react";import { Toggle } from "@/components/toggle";
export function ToggleUsage() {  const [pinned, setPinned] = useState(false);  return (    <Toggle variant="outline" size="icon" aria-label="Pin brief" pressed={pinned} onPressedChange={setPinned}>      <Pin className="size-5" aria-hidden />    </Toggle>  );}

When to use

Use when

One on/off setting applied immediately: bold, pin, mute

Don’t use when

A setting saved by a form; use a checkbox or switch