Components
Loading preview...
HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-button-group"use client"
import {
ChevronDown,
ChevronLeft,
ChevronRight,
GitFork,
Ellipsis,
Image,
Pin,
QrCode,
Star,
AlignCenter,
AlignJustify,
AlignLeft,
AlignRight,
ThumbsDown,
ThumbsUp,
Video,
} from "lucide-react"
import { Chip, Description, Dropdown, Label } from "@heroui/react"
import { ButtonGroup, Button } from "@/components/ui/heroui-button-group"
export default function Default() {
return (
<div className="flex flex-col items-start gap-6">
{/* Single button with dropdown */}
<div className="flex flex-col gap-2">
<ButtonGroup>
<Button>Merge pull request</Button>
<Dropdown>
<Button isIconOnly aria-label="More options">
<ButtonGroup.Separator />
<ChevronDown />
</Button>
<Dropdown.Popover className="max-w-[290px]" placement="bottom end">
<Dropdown.Menu>
<Dropdown.Item
className="flex flex-col items-start gap-1"
id="merge"
textValue="Create a merge commit"
>
<Label>Create a merge commit</Label>
<Description>
All commits from this branch will be added to the base branch
</Description>
</Dropdown.Item>
<Dropdown.Item
className="flex flex-col items-start gap-1"
id="squash-and-merge"
textValue="Squash and merge"
>
<Label>Squash and merge</Label>
<Description>
The 14 commits from this branch will be combined into one commit in the base
branch
</Description>
</Dropdown.Item>
<Dropdown.Item
className="flex flex-col items-start gap-1"
id="rebase-and-merge"
textValue="Rebase and merge"
>
<Label>Rebase and merge</Label>
<Description>
The 14 commits from this branch will be rebased and added to the base branch
</Description>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
</ButtonGroup>
</div>
{/* Individual buttons */}
<div className="flex flex-col gap-2">
<div className="flex flex-wrap gap-x-2 gap-y-4">
<ButtonGroup variant="tertiary">
<Button>
<GitFork className="size-3.5" />
Fork
<Chip color="accent" size="sm" variant="soft">
24
</Chip>
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<ChevronDown />
</Button>
</ButtonGroup>
<ButtonGroup variant="tertiary">
<Button isIconOnly>
<QrCode />
</Button>
<Button>
<ButtonGroup.Separator />
Scan to pay
</Button>
</ButtonGroup>
<ButtonGroup variant="tertiary">
<Button>
<ThumbsUp />
<span className="text-xs font-semibold">2.4K</span>
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<ThumbsDown />
</Button>
</ButtonGroup>
<ButtonGroup variant="tertiary">
<Button>
<Star className="size-3.5" />
Star
</Button>
<Button className="px-2">
<ButtonGroup.Separator />
<Chip color="accent" size="sm" variant="soft">
104
</Chip>
</Button>
</ButtonGroup>
<ButtonGroup variant="tertiary">
<Button>
<Pin />
Pinned
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<ChevronDown />
</Button>
</ButtonGroup>
</div>
</div>
{/* Previous/Next Button Group */}
<div className="flex flex-col gap-2">
<ButtonGroup variant="tertiary">
<Button>
<ChevronLeft />
Previous
</Button>
<Button>
<ButtonGroup.Separator />
Next
<ChevronRight />
</Button>
</ButtonGroup>
</div>
{/* Content Selection Button Group */}
<div className="flex flex-col gap-2">
<ButtonGroup variant="tertiary">
<Button>
<Image />
Photos
</Button>
<Button>
<ButtonGroup.Separator />
<Video />
Videos
</Button>
<Button isIconOnly aria-label="More options">
<ButtonGroup.Separator />
<Ellipsis />
</Button>
</ButtonGroup>
</div>
{/* Text Alignment Button Group */}
<div className="flex flex-col gap-2">
<ButtonGroup variant="tertiary">
<Button>Left</Button>
<Button>
<ButtonGroup.Separator />
Center
</Button>
<Button>
<ButtonGroup.Separator />
Right
</Button>
</ButtonGroup>
</div>
{/* Icon-Only Alignment Button Group */}
<div className="flex flex-col gap-2">
<ButtonGroup variant="tertiary">
<Button isIconOnly>
<AlignLeft />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignCenter />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignRight />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignJustify />
</Button>
</ButtonGroup>
</div>
</div>
)
}