ButtonGroup

A flex wrapper for grouping multiple Button components. Provides consistent spacing, alignment, and layout direction.

File: src/core/components/primitives/ButtonGroup.astro

Props

Prop	Type	Default	Notes
direction	"row" | "column"	"row"	Flex direction
align	"start" | "center" | "end"	"start"	Main-axis alignment (justify-content)
gap	"sm" | "md" | "lg"	"md"	Space between buttons
wrap	boolean	true	Whether buttons wrap to new lines
class	string	—	Additional CSS classes

Usage

---
import ButtonGroup from "@core/components/primitives/ButtonGroup.astro";
import Button from "@core/components/primitives/Button.astro";
---

{/* Horizontal row (default) */}
<ButtonGroup>
  <Button variant="primary">Save</Button>
  <Button variant="outline">Cancel</Button>
</ButtonGroup>

{/* Vertical stack, centered */}
<ButtonGroup direction="column" align="center" gap="lg">
  <Button variant="primary" fullWidth>Sign Up</Button>
  <Button variant="secondary" fullWidth>Learn More</Button>
</ButtonGroup>

Accessibility

• Renders with role="group" to convey the grouping relationship to assistive technologies.
• No keyboard interaction of its own — child Button components handle their own keyboard behavior.