ActionsStable

Button Group

Sourcecomponents/ButtonGroup.astro

Layouts

Groups two buttons with consistent spacing. The group owns only the gap and direction — the buttons keep their own variants. A horizontal group always stacks vertically and full-width below 680px, so mobile CTAs never crowd.

Horizontal — 16px gap, stacks vertical & full-width under 680px

Vertical, full width — gap 12px (--space-sm)

Spacing

Horizontal — gap --space-md (16px)

Primary first, then the lesser action. Same vertical alignment.

Vertical — gap --space-sm (12px)

Full-width and stacked on mobile — primary on top.

Props

Prop	Type	Default	Notes
`direction`	'horizontal' \| 'vertical'	`'horizontal'`	Side by side (16px gap) or stacked (12px gap).
`fullWidth`	boolean	`false`	Stretch every child button to 100% — used for stacked mobile CTAs.

Usage

Slot the Buttons in; the group handles the spacing. Primary first, then the lesser action.

<ButtonGroup>
  <Button variant="primary">Primary</Button>
  <Button variant="tertiary">Secondary</Button>
</ButtonGroup>

<ButtonGroup direction="vertical" fullWidth>
  <Button variant="primary">Primary</Button>
  <Button variant="tertiary">Secondary</Button>
</ButtonGroup>

Rules

Put the Primary action first, then a Secondary or Tertiary for the lesser one.

Leave a horizontal group as-is — it stacks vertical & full-width on its own below 680px.

Reach for direction="vertical" fullWidth only when you want stacking on desktop too.

Don't

Group two Primaries — it kills the hierarchy.

Set your own gap on the buttons; the group owns the spacing.