Button

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

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

Properties

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

display_modeenum

How to handle the icon

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

namestring

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

positionstring

Where to position the icon

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

labelstring

The text that will display in the button.

outlineboolean

Styles the button with an outline only.

sizeenum

Sets the size of the button

s
m
l

typeenum

The style of the button.

primary
secondary
ghost
contrast
fade

Examples

Sizes

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

Icons

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

Types

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

Outline

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