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-groupimport { ButtonGroup, Button } from "@/components/ui/heroui-button-group"
const sizes = [
{ label: "Small", size: "sm" },
{ label: "Medium (default)", size: "md" },
{ label: "Large", size: "lg" },
] as const
export default function Sizes() {
return (
<div className="flex flex-col gap-4">
{sizes.map(({ label, size }) => (
<div key={size} className="flex flex-col items-start gap-2">
<p className="text-sm text-muted-foreground">{label}</p>
<ButtonGroup size={size} variant="secondary">
<Button>First</Button>
<Button>
<ButtonGroup.Separator />
Second
</Button>
<Button>
<ButtonGroup.Separator />
Third
</Button>
</ButtonGroup>
</div>
))}
</div>
)
}