Button

A clickable element that navigates to another page or triggers an action within the current page.
---
block:
  _bookshop_name: elements/button
  link: null
  label: Button
  options:
    layout: null
    size: null
    type: primary
    outline: false
  icon:
    name: null
    options:
      display_mode: null
      position: null
---

{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

labelstring

The text that goes inside the button.

linkstring

If set, the link for the href on the <a>. If not set, the component becomes a <button>

iconobject

Properties to handle icons on a button

namestring

The lookup name of the icon. See Heroicons for a full list.

optionsobject

Configuration options for the Button Icon

display_modeenum

How to handle the icon

icon_only Shows only the icon in the button
all Shows the icon with the label

positionstring

Where to position the icon

before Shows the icon before the label
after Shows the icon after the label

optionsobject

Configuration options for the Button

outlinecheckbox

Styles the button with an outline only.

sizeenum

Sets the size of the button

s
m
l

layoutenum

full Makes the button full width
skinny Reduces the height of the button

typeenum

The style of the button.

primary
secondary
ghost
contrast
fade

Examples

Sizes

---
block:
  _bookshop_name: layouts/button-group
  button_blocks:
    - _bookshop_name: elements/button
      label: Large
      link: null
      options:
        layout: null
        size: l
        type: primary
        outline: false
      icon:
        name: null
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Medium
      link: null
      options:
        layout: null
        size: m
        type: primary
        outline: false
      icon:
        name: null
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Small
      link: null
      options:
        layout: null
        size: s
        type: primary
        outline: false
      icon:
        name: null
        options:
          display_mode: null
          position: null
  options:
    direction: row
    align: start
    gap: xs
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Icons

---
block:
  _bookshop_name: layouts/button-group
  button_blocks:
    - _bookshop_name: elements/button
      label: Medium
      link: null
      options:
        layout: null
        size: m
        type: secondary
        outline: false
      icon:
        name: user-group
        options:
          display_mode: icon_only
          position: null
    - _bookshop_name: elements/button
      label: Icon Before
      options:
        layout: null
        size: m
        type: secondary
        outline: false
      icon:
        name: signal
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Icon After
      options:
        layout: null
        size: m
        type: secondary
        outline: false
      icon:
        name: arrow-down-right
        options:
          display_mode: null
          position: after
  options:
    direction: row
    align: start
    gap: xs
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: layouts/button-group
  button_blocks:
    - _bookshop_name: elements/button
      label: Medium
      link: null
      options:
        layout: null
        size: l
        type: secondary
        outline: false
      icon:
        name: user-group
        options:
          display_mode: icon_only
          position: null
    - _bookshop_name: elements/button
      label: Icon Before
      options:
        layout: null
        size: l
        type: secondary
        outline: false
      icon:
        name: signal
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Icon After
      options:
        layout: null
        size: l
        type: secondary
        outline: false
      icon:
        name: arrow-down-right
        options:
          display_mode: null
          position: after
  options:
    direction: row
    align: start
    gap: xs
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Types

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

Layouts

---
block:
  _bookshop_name: layouts/button-group
  button_blocks:
    - _bookshop_name: elements/button
      label: No Layout
      link: null
      options:
        layout: null
        size: null
        type: contrast
        outline: false
      icon:
        name: bolt
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Full
      link: null
      options:
        layout: full
        size: null
        type: contrast
        outline: false
      icon:
        name: bolt
        options:
          display_mode: null
          position: null
    - _bookshop_name: elements/button
      label: Skinny
      link: null
      options:
        layout: skinny
        size: null
        type: contrast
        outline: false
      icon:
        name: bolt
        options:
          display_mode: null
          position: null
  options:
    direction: column
    align: start
    gap: xs
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Outline

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