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

buttonSections string | default: array

direction string | default: row

alignX string | default: start

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
---