diff --git a/packages/govuk-frontend/src/govuk/components/button/template.njk b/packages/govuk-frontend/src/govuk/components/button/template.njk
index 0a72976de0..cfd123731e 100644
--- a/packages/govuk-frontend/src/govuk/components/button/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/button/template.njk
@@ -31,28 +31,77 @@
{%- endmacro -%}
-{#- Define common attributes that we can use across all element types #}
+{#- Define attributes for links only #}
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set attributesLinkHtml %}
+ {{- govukAttributes({
+ href: params.href
+ if params.href
+ else "#",
+ role: "button",
+ draggable: "false"
+ }) -}}
+{% endset %}
-{#- Define common attributes we can use for both button and input types #}
+{#- Define attributes for buttons and inputs only #}
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{ params.preventDoubleClick }}"{% endif %}{% endset %}
+{%- set attributesButtonHtml %}
+ {{- govukAttributes({
+ value: {
+ value: params.text
+ if element == "input"
+ else params.value,
+ optional: true
+ },
+ type: params.type
+ if params.type
+ else "submit",
+ name: {
+ value: params.name,
+ optional: true
+ },
+ disabled: {
+ value: params.disabled,
+ optional: true
+ },
+ "aria-disabled": {
+ value: params.disabled | string
+ if params.disabled !== undefined
+ else undefined,
+ optional: true
+ },
+ "data-prevent-double-click": {
+ value: params.preventDoubleClick | string
+ if params.preventDoubleClick !== undefined
+ else undefined,
+ optional: true
+ }
+ }) -}}
+{% endset %}
-{#- Actually create a button... or a link! #}
+{#- Define attributes for component #}
-{%- if element == 'a' %}
-
- {{ params.html | safe | trim | indent(2) if params.html else params.text }}
- {{- _startIcon() | safe if params.isStartButton }}
-
+{%- set attributesHtml %}
+ {{- (attributesButtonHtml if ["button", "input"].includes(element) else attributesLinkHtml) | safe -}}
+
+ {{- govukAttributes({
+ class: classNames,
+ "data-module": "govuk-button",
+ id: {
+ value: params.id,
+ optional: true
+ }
+ }) -}}
+{% endset %}
+
+{#- Actually create a button... or a link! #}
-{%- elseif element == 'button' %}
-
+{{ element }}>
-{%- elseif element == 'input' %}
-
+{%- elif element == 'input' %}
+
{%- endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
index ed00eee798..e284f25ece 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -3,9 +3,20 @@
{% from "../hint/macro.njk" import govukHint %}
{% from "../label/macro.njk" import govukLabel %}
+{#- Set classes for this component #}
+{%- set classNames = "govuk-input" -%}
+
+{%- if params.classes %}
+ {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{%- if params.errorMessage %}
+ {% set classNames = classNames + " govuk-input--error" %}
+{% endif %}
+
{#- a record of other elements that we need to associate with the input using
aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" -%}
+{% set describedBy = params.describedBy if params.describedBy else undefined -%}
{%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
{%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
@@ -13,14 +24,44 @@
{%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %}
{%- macro _inputElement(params) -%}
-
{%- endmacro -%}