{% macro govukButton(params) %} {% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %} {#- Set classes for this component #} {%- set classNames = "govuk-button" -%} {%- if params.classes %} {% set classNames = classNames ~ " " ~ params.classes %} {% endif %} {%- if params.isStartButton %} {% set classNames = classNames ~ " govuk-button--start" %} {% endif %} {#- Determine type of element to use, if not explicitly set #} {%- if params.element %} {% set element = params.element | lower %} {% else %} {% if params.href %} {% set element = 'a' %} {% else %} {% set element = 'button' %} {% endif %} {% endif -%} {%- macro _startIcon() %} {#- The SVG needs `focusable="false"` so that Internet Explorer does not treat it as an interactive element - without this it will be 'focusable' when using the keyboard to navigate. #} {%- endmacro -%} {#- Define common attributes that we can use across all element types #} {%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %} {#- Define common attributes we can use for both button and input types #} {%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick is not undefined %} data-prevent-double-click="{{ params.preventDoubleClick | lower }}"{% endif %}{% endset %} {#- Actually create a button... or a link! #} {%- if element == 'a' %} {{ params.html | safe | trim | indent(2) if params.html else params.text }} {{- _startIcon() | safe if params.isStartButton }} {%- elif element == 'button' %} {%- elif element == 'input' %} {%- endif %} {% endmacro %}