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"
export default function Disabled() {
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col items-start gap-2">
<p className="text-sm text-muted-foreground">All buttons disabled</p>
<ButtonGroup isDisabled>
<Button>First</Button>
<Button>
<ButtonGroup.Separator />
Second
</Button>
<Button>
<ButtonGroup.Separator />
Third
</Button>
</ButtonGroup>
</div>
<div className="flex flex-col items-start gap-2">
<p className="text-sm text-muted-foreground">Group disabled, but one button overrides</p>
<ButtonGroup isDisabled>
<Button>First</Button>
<Button>
<ButtonGroup.Separator />
Second
</Button>
<Button isDisabled={false}>
<ButtonGroup.Separator />
Third (enabled)
</Button>
</ButtonGroup>
</div>
</div>
)
}