Form

Toggle

A pressed/unpressed button. Pine when on, honest aria-pressed underneath.

Show code

"use client";

import { SparkIcon } from "@/registry/lilt/ui/icons";
import { Toggle } from "@/registry/lilt/ui/toggle";

export default function ToggleDemo() {
  return (
    <div className="flex items-center gap-3">
      <Toggle aria-label="Favorite" iconOnly>
        <SparkIcon size={18} />
      </Toggle>
      <Toggle>Preview mode</Toggle>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/toggle

Accessibility

Uses aria-pressed — keep the label identical in both states and let the style change.
Icon-only toggles require an aria-label.