Back to site

Button Group

Arranges buttons side by side with consistent spacing.

---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="start" direction="row" label="">
  <Button variant="primary">
    Primary Action
  </Button>
  <Button variant="secondary">
    Secondary Action
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: row
  alignX: start
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Primary Action
      variant: primary
    - _component: building-blocks/core-elements/button
      text: Secondary Action
      variant: secondary
  label: ''
---

Overview

Groups buttons into rows or columns with even spacing and alignment. Keeps button layout consistent.

Properties

label string

Optional label for the button group to help identify it in the editor.

buttonSections array | default: array

Array of button components to render within the group.

direction enum | default: row

Direction of button layout.

Accepted values:
  • row
  • column

alignX enum | default: start

The horizontal alignment of the buttons within the group.

Accepted values:
  • start
  • center
  • end

Slots

default

The contents for the the ButtonGroup. Used only when the buttonSections property is not set.

Examples

Direction

---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="start" direction="row">
  <Button variant="secondary">
    Button A
  </Button>
  <Button variant="secondary">
    Button B
  </Button>
  <Button variant="secondary">
    Button C
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: row
  alignX: start
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Button A
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button B
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button C
      variant: secondary
---
---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="start" direction="column">
  <Button variant="secondary">
    Button A
  </Button>
  <Button variant="secondary">
    Button B
  </Button>
  <Button variant="secondary">
    Button C
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: column
  alignX: start
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Button A
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button B
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button C
      variant: secondary
---

Alignment

---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="start" direction="row">
  <Button variant="secondary">
    Button A
  </Button>
  <Button variant="secondary">
    Button B
  </Button>
  <Button variant="secondary">
    Button C
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: row
  alignX: start
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Button A
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button B
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button C
      variant: secondary
---
---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="center" direction="row">
  <Button variant="secondary">
    Button A
  </Button>
  <Button variant="secondary">
    Button B
  </Button>
  <Button variant="secondary">
    Button C
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: row
  alignX: center
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Button A
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button B
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button C
      variant: secondary
---
---
import Button from "@core-elements/button/Button.astro";
import ButtonGroup from "@wrappers/button-group/ButtonGroup.astro";
---

<ButtonGroup alignX="end" direction="row">
  <Button variant="secondary">
    Button A
  </Button>
  <Button variant="secondary">
    Button B
  </Button>
  <Button variant="secondary">
    Button C
  </Button>
</ButtonGroup>
---
blocks:
  _component: building-blocks/wrappers/button-group
  direction: row
  alignX: end
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Button A
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button B
      variant: secondary
    - _component: building-blocks/core-elements/button
      text: Button C
      variant: secondary
---