Toggle Button Group

Buttons 1

About

A grouped set of toggle buttons that lets users select one or more options from a related set, with keyboard and screen-reader accessible selection state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle Button Group to your project and fits it to your theme.

Code

How Toggle Button Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ToggleButtonGroup } from "@/components/ui/tailwind-togglebuttongroup";
import { ToggleButton } from "@/components/ui/tailwind-togglebuttongroup-utils/ToggleButton";

export default function ToggleButtonGroupDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <ToggleButtonGroup defaultSelectedKeys={["list"]}>
        <ToggleButton id="list">List view</ToggleButton>
        <ToggleButton id="grid">Grid view</ToggleButton>
        <ToggleButton id="gallery">Gallery view</ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}