Button Group

Controls the alignment and direction of buttons.

_bookshop_name: wrappers/button-group
direction: row
align: start
button_blocks:
  - _bookshop_name: primitives/button
    label: Primary Action
    variant: primary
    size: md
  - _bookshop_name: primitives/button
    label: Secondary Action
    variant: secondary
    size: md

Properties

buttonBlocks string

Button components to render within the group.

direction enum | default: row

Direction of button layout.

Accepted values:
  • row
  • column

align enum | default: start

Alignment of buttons within the group.

Accepted values:
  • start
  • center
  • end

Examples

Direction

_bookshop_name: wrappers/button-group
direction: row
align: start
button_blocks:
  - _bookshop_name: primitives/button
    label: Button A
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button B
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button C
    variant: secondary
    size: md
_bookshop_name: wrappers/button-group
direction: column
align: start
button_blocks:
  - _bookshop_name: primitives/button
    label: Button A
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button B
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button C
    variant: secondary
    size: md

Alignment

_bookshop_name: wrappers/button-group
direction: row
align: start
button_blocks:
  - _bookshop_name: primitives/button
    label: Button A
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button B
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button C
    variant: secondary
_bookshop_name: wrappers/button-group
direction: row
align: center
button_blocks:
  - _bookshop_name: primitives/button
    label: Button A
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button B
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button C
    variant: secondary
_bookshop_name: wrappers/button-group
direction: row
align: end
button_blocks:
  - _bookshop_name: primitives/button
    label: Button A
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button B
    variant: secondary
  - _bookshop_name: primitives/button
    label: Button C
    variant: secondary