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 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>
)
}