Back to site

Button Group

Arranges buttons side by side with consistent spacing.

---
import ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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

marginTop enum

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

marginBottom enum

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

gap enum

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl

Slots

default

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

Examples

Direction

---
import ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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 ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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 ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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 ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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 ButtonGroup from "@components/building-blocks/wrappers/button-group.astro";
import Button from "@components/building-blocks/core-elements/button.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
---