Button Group

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

Properties

button_blocksobject array

An array of button objects.

optionsobject

Configuration options for the Button Group

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
  button_blocks:
    - _bookshop_name: elements/button
      label: Primary button
      link: null
      options:
        layout: null
        size: null
        type: primary
        outline: true
      icon:
        name: null
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Secondary button
      options:
        layout: null
        size: null
        type: secondary
        outline: true
      icon:
        name: null
        options:
          display_mode: null
          position: null
  options:
    direction: row
    align: start
    gap: null
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

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

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

Direction

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

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