ButtonGroup

Buttons 3

About

common button group

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

Code

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

Usage.tsx

import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";
import { Play, ShieldBan, Flame } from "lucide-react"

const DemoOne = () => {
  return (
    <ButtonGroup>
      <ButtonGroupItem variant="default" size="lg">
        <div className="inline-flex items-center justify-center gap-2 h-full">
          <div>Run</div>
          <Play />
        </div>
      </ButtonGroupItem>
      <ButtonGroupItem size="lg">
        <ShieldBan />
        <span>Rules</span>
      </ButtonGroupItem>
      <ButtonGroupItem size="lg" variant="destructive">
        <Flame />
        <span>Reset</span>
      </ButtonGroupItem>
    </ButtonGroup>
  );
};

export { DemoOne };