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 alignmentHorizontal="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
  alignmentHorizontal: 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

alignmentHorizontal 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 alignmentHorizontal="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
  alignmentHorizontal: 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 alignmentHorizontal="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
  alignmentHorizontal: 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 alignmentHorizontal="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
  alignmentHorizontal: 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 alignmentHorizontal="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
  alignmentHorizontal: 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 alignmentHorizontal="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
  alignmentHorizontal: 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
---