Toggle

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/toggle

UsageCopy Anchor Link

import { Toggle } from "@/components/ui/toggle";

<Toggle aria-label="Bold">
  <BoldIcon />
</Toggle>;

Toggle renders a <button> with aria-pressed. Give icon-only toggles an aria-label.

Icon togglesCopy Anchor Link

For a set of related toggles with shared state, use Toggle Group.

SizesCopy Anchor Link

API referenceCopy Anchor Link

Also accepts every Base UI Toggle prop, like pressed, defaultPressed, onPressedChange, and disabled.

toggleVariants is also exported, to style other elements like a toggle.