Toggle

A two-state button that can be either on or off.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/toggle.json

Usage

Use for toolbar-style on/off controls. Export toggleVariants is shared with toggle-group styling.

import { IconBold } from "@tabler/icons-react";
import { Toggle } from "@/components/toggle/toggle";

export function Example() {
  return (
    <Toggle aria-label="Toggle bold">
      <IconBold />
    </Toggle>
  );
}

Variants: default, outline. Sizes: default, sm, lg. Control with pressed / onPressedChange when needed. Built on Base UI Toggle.