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¶

<a
    class="btn btn_{{ moduleConfig.size }} btn_{{ moduleConfig.type }} {{ moduleConfig.classNames }}"
    href="{{ moduleConfig.url }}"
    rel="noopener noreferrer"
    {% if not moduleConfig.shouldOpenInTheSameTab %}target="_blank"{% endif %}
>
    {{ moduleConfig.content }}
</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
            }
        ]
    },
    {
        "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