Button Group

Groups multiple buttons together to manage their alignment, spacing, and placement.
---
block:
  _bookshop_name: layouts/button-group
  direction: row
  align: start
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: false
    - _bookshop_name: elements/button
      label: Secondary
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

button_blocksobject array

An array of button objects.

directionenum

The direction to list the buttons.

column Positions the buttons on top of each other.
row Positions the buttons on beside of each other

alignenum

The alignment of the buttons.

start Positions the buttons at the start of the container.
center Positions the buttons in the center of the container.
end Positions the buttons at the end of the container.

gapenum

The spacing between buttons.

none
xs
s
m
l
xl
2xl

marginobject

The spacing above and below the buttons.

topenum

The spacing above the buttons.

none
xs
s
m
l
xl
2xl

bottomenum

The spacing below the buttons.

none
xs
s
m
l
xl
2xl

Examples

Alignment

---
block:
  _bookshop_name: layouts/button-group
  direction: row
  align: start
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: true
    - _bookshop_name: elements/button
      label: Secondary button
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: layouts/button-group
  direction: row
  align: center
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: true
    - _bookshop_name: elements/button
      label: Secondary button
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: layouts/button-group
  direction: row
  align: end
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: true
    - _bookshop_name: elements/button
      label: Secondary button
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Direction

---
block:
  _bookshop_name: layouts/button-group
  direction: row
  align: start
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: true
    - _bookshop_name: elements/button
      label: Secondary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: layouts/button-group
  direction: column
  align: start
  gap: null
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: primary
      outline: true
    - _bookshop_name: elements/button
      label: Secondary button
      icon:
        display_mode: null
        position: null
        name: null
      size: null
      type: secondary
      outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}