Remove nhsuk-button--disabled modifier

Disabled style is applied to any nhs-button with the disabled attribute
nhsuk · Nov 20, 2024 · e7b5a1c · e7b5a1c
1 parent 71c3b3b
commit e7b5a1c
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 4 deletions.
diff --git a/packages/components/button/README.md b/packages/components/button/README.md
@@ -62,7 +62,7 @@ Find out more about the button component and when to use it in the [NHS digital
 #### HTML markup
 
 ```html
-<button class="nhsuk-button nhsuk-button--disabled" type="submit" disabled="disabled" aria-disabled="true" data-module="nhsuk-button">
+<button class="nhsuk-button" type="submit" disabled="disabled" aria-disabled="true" data-module="nhsuk-button">
   Disabled button
 </button>
 ```

diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss
@@ -194,7 +194,6 @@ $button-shadow-size: 4px;
 /**
  * Button disabled states
  */
-.nhsuk-button--disabled,
 .nhsuk-button:disabled {
   opacity: (0.5);
   pointer-events: none;

diff --git a/packages/components/button/template.njk b/packages/components/button/template.njk
@@ -14,8 +14,7 @@
 
 {# Define common attributes that we can use across all element types #}
 {% set commonAttributes %} class="nhsuk-button
-  {%- if params.classes %} {{ params.classes }}{% endif %}
-  {%- if params.disabled %} nhsuk-button--disabled{% endif %}"
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
   data-module="nhsuk-button"
   {% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}
   {{- nhsukAttributes(params.attributes) }}