Fred data-fred-attrs="href"

Support Extras
1

How can I make a button’s href editable? Normally with another element you’d be able to click it and then edit the attribute, but when clicking the button it obviously behaves like a button and opens the link instead :thinking:

<a class="btn btn-primary" href="" data-fred-attrs="href">Button</a>

2

Hey sketchi,

I don’t know if you solved this yourself, but here’s my solution for others asking the same question.

I created a button element with configurable style, link and text. I’ve allowed for an internal link and external URL, and if an external link is specified this opens in a new window. Fiddle around with this to suit your own needs but I hope it’s helpful.

Firstly, my element/twig markup:

{% if (link is not empty) and (link != '#') %}
      <a class="btn {{extraClass}}" href="{{link.url}}">{{text}}</a>
{% elseif external_url|length %}
      <a class="btn {{extraClass}}" href="{{external_url}}" target="_blank">{{text}}</a>
{% else %}
      <a class="btn {{extraClass}}" href="#">{{text}}</a>
{% endif %}

Options:

      "settings": [
        {
          "name": "extraClass",
          "label": "Styke",
          "type": "select",
          "options": {
            "Primary": "btn-primary",
            "Secondary": "btn-secondary"
          },
          "value": "btn-primary"
        },
        {
          "name": "text",
          "label": "Text",
          "type": "text",
          "value": "Button"
        },
        {
          "name": "link",
          "label": "Internal Link",
          "type": "page",
          "clearButton": true,
          "value": {
            "id": "",
            "url": ""
          }
        },
        {
          "name": "external_url",
          "label": "URL",
          "type": "text",
          "value": ""
        }
      ]
    }
1 Like