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 { ButtonGroup, Button } from "@/components/ui/heroui-button-group"

const variants = [
  { label: "Primary", variant: "primary" },
  { label: "Secondary", variant: "secondary" },
  { label: "Tertiary", variant: "tertiary" },
  { label: "Outline", variant: "outline" },
  { label: "Ghost", variant: "ghost" },
  { label: "Danger", variant: "danger" },
] as const

export default function Variants() {
  return (
    <div className="flex flex-col gap-6">
      {variants.map(({ label, variant }) => (
        <div key={variant} className="flex flex-col gap-2">
          <p className="text-sm text-muted-foreground">{label}</p>
          <ButtonGroup variant={variant}>
            <Button>First</Button>
            <Button>
              <ButtonGroup.Separator />
              Second
            </Button>
            <Button>
              <ButtonGroup.Separator />
              Third
            </Button>
          </ButtonGroup>
        </div>
      ))}
    </div>
  )
}