HeroUI Button Group

Buttons

About

HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.

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

Code

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

Usage.tsx

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"

import { ButtonGroup, Button } from "@/components/ui/heroui-button-group"

export default function FullWidth() {
  return (
    <div className="w-[400px] space-y-3">
      <ButtonGroup fullWidth>
        <Button>First</Button>
        <Button>
          <ButtonGroup.Separator />
          Second
        </Button>
        <Button>
          <ButtonGroup.Separator />
          Third
        </Button>
      </ButtonGroup>
      <ButtonGroup fullWidth>
        <Button isIconOnly>
          <AlignLeft />
        </Button>
        <Button isIconOnly>
          <ButtonGroup.Separator />
          <AlignCenter />
        </Button>
        <Button isIconOnly>
          <ButtonGroup.Separator />
          <AlignRight />
        </Button>
      </ButtonGroup>
    </div>
  )
}