Button¶

Availability: All contexts

The button module is used to render a single button on the page.

Configuration parameters¶

content¶

string Text content displayed on the button.

type¶

select Defines the visual style of the button. Available options:
- primary Primary button (default)
- secondary Secondary button
- outline Outline button
- ghost Ghost (text only)

size¶

select Sets the button size. Available options:
- xs Extra small
- s Small
- m Medium (default)
- l Large

url¶

string The URL the button links to. Accepts absolute (https://...) or relative (/...) URLs.

shouldOpenInTheSameTab¶

int If set to 1, the link will open in the same tab. If set to 0, the link opens in a new tab.

classNames¶

string represents a string of classes that will be added to the button.

Module source code¶

{% if moduleConfig.addIcon == "1" %}
    {% from "@macros/image.twig" import image %}
{% endif %}

<a
    class="btn btn_{{ moduleConfig.size }} btn_{{ moduleConfig.type }} {{ moduleConfig.classNames }}"
    href="{{ moduleConfig.url }}"
    rel="noopener noreferrer"
    {% if not moduleConfig.shouldOpenInTheSameTab %}target="_blank"{% endif %}
>

    {% if  moduleConfig.addIcon == "1" and moduleConfig.iconPosition == "before" %}
        {{
            image({
                img: {
                    width: moduleConfig.iconImage.width,
                    height: moduleConfig.iconImage.height,
                    src: moduleConfig.iconImage.paths.original,
                    id: "picture-#{moduleConfig.iconImage.id}",
                    alt: "",
                    decoding: "async",
                    loading: "lazy",
                    class: "btn__icon btn__icon_left"
                    }
                }
            )
        }}
    {% endif %}

    {{ moduleConfig.content }}

    {% if  moduleConfig.addIcon == "1" and moduleConfig.iconPosition == "after" %}
        {{
            image({
                img: {
                    width: moduleConfig.iconImage.width,
                    height: moduleConfig.iconImage.height,
                    src: moduleConfig.iconImage.paths.original,
                    id: "picture-#{moduleConfig.iconImage.id}",
                    alt: "",
                    decoding: "async",
                    loading: "lazy",
                    class: "btn__icon btn__icon_right"
                    }
                }
            )
        }}
    {% endif %}
</a>

Module configuration schema¶

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "%s Related settings in the Shoper Visual Editor%s buttons appearance (including color, corner rounding, outline) in the [\"Colors and Styles\"](%s) tab.",
                    "placeholderValues": [
                        "####",
                        "\n",
                        "#theme-and-colors"
                    ]
                }
            },
            {
                "type": "text",
                "name": "content",
                "label": "Button content",
                "isRequired": true,
                "supportsTranslations": 1
            },
            {
                "type": "select",
                "name": "type",
                "label": "Button type",
                "isRequired": true,
                "defaultValue": "primary",
                "options": {
                    "isWithSearch": 0,
                    "selectOptions": [
                        { "key": "primary", "label": "Primary <<button>>" },
                        { "key": "secondary", "label": "Secondary" },
                        { "key": "outline", "label": "Outline" },
                        { "key": "ghost", "label": "Ghost (text only)" }
                    ]
                }
            },
            {
                "type": "select",
                "name": "size",
                "label": "Button size",
                "isRequired": true,
                "defaultValue": "m",
                "options": {
                    "isWithSearch": 0,
                    "selectOptions": [
                        { "key": "xs", "label": "XS" },
                        { "key": "s", "label": "S" },
                        { "key": "m", "label": "M" },
                        { "key": "l", "label": "L" }
                    ]
                }
            },
            {
                "type": "text",
                "name": "url",
                "label": "Webpage URL",
                "isRequired": true,
                "options": {
                    "placeholder": "https:\/\/ or \/"
                },
                "supportsTranslations": 1,
                "validators": [
                    {
                        "type": "url",
                        "options": {
                            "allowRelativePath": true
                        }
                    }
                ]
            },
            {
                "type": "checkbox",
                "name": "shouldOpenInTheSameTab",
                "label": "Open the link in the same tab",
                "hint": "Opening links in the same tab makes navigation easier: using the \"back\" button is possible. The customer can decide to open the page in a new tab.",
                "defaultValue": 1,
                "supportsTranslations": 1
            },
            {
                "type": "checkbox",
                "name": "addIcon",
                "label": "Add icon",
                "defaultValue": 0,
                "children": [
                    {
                        "type": "imageUpload",
                        "name": "iconImage",
                        "label": "Icon",
                        "hint": "The file name is important for SEO and should describe the content of the image. Use dashes to separate words.",
                        "options": {
                            "allowedExtensions": ["webp", "svg", "jpg", "png", "gif", "jpeg"]
                        },
                        "relations": [
                            {
                                "parentName": "addIcon",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled", "setOptional"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable", "setRequired"]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "type": "radio",
                        "name": "iconPosition",
                        "label": "Icon position",
                        "defaultValue": "before",
                        "options": {
                            "radioOptions": [
                                {
                                    "key": "before",
                                    "label": "Before text"
                                },
                                {
                                    "key": "after",
                                    "label": "After text"
                                }
                            ]
                        },
                        "relations": [
                            {
                                "parentName": "addIcon",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled", "setOptional"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable", "setRequired"]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "state": "unfolded",
        "label": "CSS",
        "elements": [
            {
                "type": "text",
                "name": "classNames",
                "label": "CSS class",
                "labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
            }
        ]
    }
]

Styles reference¶

Buttons