Warning button variant (#976)

On our staff facing service, we use interruption screens that warn a user before they proceed to undertake an action that is destructive and/or cannot be undone. On these pages, we use also a red warning button to further indicate that a destructive action will take place:

<img width="740" alt="Screenshot of a screen asking if a user wants to delete a vaccine." src="https://github.com/nhsuk/nhsuk-frontend/assets/813383/be9fe626-8851-4053-8a7d-925031c8bee2">

This follows [a similar pattern from the GOV.UK Design System](https://design-system.service.gov.uk/components/button/#warning-buttons):

> ### Warning buttons
>
> Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

This PR adds an equivalent `--warning` variant to `nhsuk-button`. In the corresponding Service Manual guidance for this component, we can start by using the same guidance as that used in the GOV.UK Design System.

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Make nhsuk-page-width a default so that services can override it ([PR 971](https://github.com/nhsuk/nhsuk-frontend/pull/971))
 - Make footer copyright statement configurable via Nunjucks parameters ([PR 975](https://github.com/nhsuk/nhsuk-frontend/pull/975))
 - Remove unused nhsuk-u-top-and-bottom utility class ([PR 979](https://github.com/nhsuk/nhsuk-frontend/pull/979))
+- Add warning button ([PR 976](https://github.com/nhsuk/nhsuk-frontend/pull/976))
 
 ## 8.2.0 - 12 June 2024
 

app/components/button/warning.njk

@@ -0,0 +1,22 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button warning' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Yes, delete this vaccine",
+            "classes": "nhsuk-button--warning"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}

app/pages/examples.njk

@@ -34,6 +34,7 @@
     <li><a href="../components/button/disabled.html">Button disabled</a></li>
     <li><a href="../components/button/secondary.html">Button secondary</a></li>
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
+    <li><a href="../components/button/warning.html">Button warning</a></li>
     <li><a href="../components/card/basic-card.html">Card - Basic card</a></li>
     <li><a href="../components/card/card-with-image.html">Card - Card with an image</a></li>
     <li><a href="../components/card/card-group.html">Card - Card group</a></li>

packages/components/button/README.md

@@ -130,6 +130,31 @@ Find out more about the button component and when to use it in the [NHS digital
 
 ---
 
+### Button warning
+
+[Preview the button warning component](https://nhsuk.github.io/nhsuk-frontend/components/button/warning.html)
+
+#### HTML markup
+
+```html
+<button class="nhsuk-button nhsuk-button--warning" type="submit" data-module="nhsuk-button">
+  Delete account
+</button>
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/button/macro.njk' import button %}
+
+{{ button({
+  "text": "Yes, delete this vaccine",
+  "classes": "nhsuk-button--warning"
+}) }}
+```
+
+---
+
 ### Button with double click prevention
 
 #### HTML markup

packages/components/button/_button.scss

@@ -180,6 +180,33 @@ $button-shadow-size: 4px;
   }
 }
 
+.nhsuk-button--warning {
+  background-color: $nhsuk-warning-button-color;
+  box-shadow: 0 $button-shadow-size 0 $nhsuk-warning-button-shadow-color;
+
+  &:hover {
+    background-color: darken($nhsuk-warning-button-color, 10%);
+  }
+
+  &:focus {
+    background: $nhsuk-focus-color;
+    box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color;
+    color: $nhsuk-focus-text-color;
+    outline: $nhsuk-focus-width solid transparent;
+  }
+
+  &:active {
+    background: $nhsuk-warning-button-active-color;
+    box-shadow: none;
+    color: $nhsuk-button-text-color;
+    top: $button-shadow-size;
+  }
+
+  &.nhsuk-button--disabled {
+    background-color: $nhsuk-warning-button-color;
+  }
+}
+
 /**
  * Button disabled states
  */

packages/core/settings/_colours.scss

@@ -151,5 +151,10 @@ $nhsuk-reverse-button-hover-color: shade($nhsuk-reverse-button-color, 20%);
 $nhsuk-reverse-button-active-color: $color-nhsuk-black;
 $nhsuk-reverse-button-shadow-color: $color-nhsuk-black;
 
+$nhsuk-warning-button-color: $color_nhsuk-red;
+$nhsuk-warning-button-hover-color: shade($nhsuk-warning-button-color, 20%);
+$nhsuk-warning-button-active-color: shade($nhsuk-warning-button-color, 50%);
+$nhsuk-warning-button-shadow-color: shade($nhsuk-warning-button-color, 50%);
+
 $nhsuk-button-text-color: $color_nhsuk-white;
 $nhsuk-reverse-button-text-color: $color_nhsuk-black;