{
  "name": "Button",
  "component": "button",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "text": "Save and continue"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<button class=\"nhsuk-button\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save and continue\n</button>"
    },
    {
      "name": "default, small",
      "context": {
        "text": "Save and continue",
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save and continue\n</button>"
    },
    {
      "name": "disabled",
      "context": {
        "text": "Disabled button",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<button class=\"nhsuk-button\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Disabled button\n</button>"
    },
    {
      "name": "disabled, small",
      "context": {
        "text": "Disabled button",
        "disabled": true,
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Disabled button\n</button>"
    },
    {
      "name": "example reverse save button, small",
      "context": {
        "text": "Save",
        "variant": "reverse",
        "small": true
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save\n</button>"
    },
    {
      "name": "example reverse search button, small",
      "context": {
        "text": "Search",
        "variant": "reverse",
        "small": true
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>"
    },
    {
      "name": "example secondary save button, small",
      "context": {
        "text": "Save",
        "variant": "secondary",
        "small": true
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save\n</button>"
    },
    {
      "name": "example secondary search button, small",
      "context": {
        "text": "Search",
        "variant": "secondary",
        "small": true
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>"
    },
    {
      "name": "login",
      "context": {
        "text": "Continue",
        "variant": "login"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login\" data-module=\"nhsuk-button\" type=\"submit\">\n  Continue\n</button>"
    },
    {
      "name": "login as a link",
      "context": {
        "text": "Continue",
        "variant": "login",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--login\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Continue\n</a>"
    },
    {
      "name": "login as a link, small",
      "context": {
        "text": "Continue",
        "variant": "login",
        "small": true,
        "href": "#"
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--login nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Continue\n</a>"
    },
    {
      "name": "login disabled",
      "context": {
        "text": "Continue",
        "variant": "login",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Continue\n</button>"
    },
    {
      "name": "login disabled, small",
      "context": {
        "text": "Continue",
        "variant": "login",
        "disabled": true,
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Continue\n</button>"
    },
    {
      "name": "login, small",
      "context": {
        "text": "Continue",
        "variant": "login",
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Continue\n</button>"
    },
    {
      "name": "login with icon at end",
      "context": {
        "text": "Next",
        "variant": "login",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "login with icon at end, small",
      "context": {
        "text": "Next",
        "variant": "login",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "login with icon at start",
      "context": {
        "text": "Previous",
        "variant": "login",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "login with icon at start, small",
      "context": {
        "text": "Previous",
        "variant": "login",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--login nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "reverse",
      "context": {
        "text": "Log out",
        "variant": "reverse"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" type=\"submit\">\n  Log out\n</button>"
    },
    {
      "name": "reverse as a link",
      "context": {
        "text": "Log out",
        "variant": "reverse",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {
        "layout": "background-blue"
      },
      "html": "<a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Log out\n</a>"
    },
    {
      "name": "reverse as a link, small",
      "context": {
        "text": "Log out",
        "variant": "reverse",
        "small": true,
        "href": "#"
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<a class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Log out\n</a>"
    },
    {
      "name": "reverse disabled",
      "context": {
        "text": "Log out",
        "variant": "reverse",
        "disabled": true
      },
      "screenshot": true,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Log out\n</button>"
    },
    {
      "name": "reverse disabled, small",
      "context": {
        "text": "Log out",
        "variant": "reverse",
        "disabled": true,
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Log out\n</button>"
    },
    {
      "name": "reverse, small",
      "context": {
        "text": "Log out",
        "variant": "reverse",
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Log out\n</button>"
    },
    {
      "name": "reverse with icon at end",
      "context": {
        "text": "Next",
        "variant": "reverse",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "reverse with icon at end, small",
      "context": {
        "text": "Next",
        "variant": "reverse",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "reverse with icon at start",
      "context": {
        "text": "Previous",
        "variant": "reverse",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "reverse with icon at start, small",
      "context": {
        "text": "Previous",
        "variant": "reverse",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-blue"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--reverse nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "secondary",
      "context": {
        "text": "Find my location",
        "variant": "secondary"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary\" data-module=\"nhsuk-button\" type=\"submit\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary as a link",
      "context": {
        "text": "Find my location",
        "variant": "secondary",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--secondary\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Find my location\n</a>"
    },
    {
      "name": "secondary as a link, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary",
        "small": true,
        "href": "#"
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Find my location\n</a>"
    },
    {
      "name": "secondary disabled",
      "context": {
        "text": "Find my location",
        "variant": "secondary",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary disabled, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary",
        "disabled": true,
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary",
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, solid background",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid\" data-module=\"nhsuk-button\" type=\"submit\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, solid background as a link",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {
        "layout": "background-grey"
      },
      "html": "<a class=\"nhsuk-button nhsuk-button--secondary-solid\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Find my location\n</a>"
    },
    {
      "name": "secondary, solid background as a link, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid",
        "small": true,
        "href": "#"
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<a class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Find my location\n</a>"
    },
    {
      "name": "secondary, solid background disabled",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid",
        "disabled": true
      },
      "screenshot": true,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, solid background disabled, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid",
        "disabled": true,
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, solid background, small",
      "context": {
        "text": "Find my location",
        "variant": "secondary-solid",
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Find my location\n</button>"
    },
    {
      "name": "secondary, solid background with icon at end",
      "context": {
        "text": "Next",
        "variant": "secondary-solid",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "secondary, solid background with icon at end, small",
      "context": {
        "text": "Next",
        "variant": "secondary-solid",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "secondary, solid background with icon at start",
      "context": {
        "text": "Previous",
        "variant": "secondary-solid",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "secondary, solid background with icon at start, small",
      "context": {
        "text": "Previous",
        "variant": "secondary-solid",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {
        "layout": "background-grey"
      },
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "secondary with icon at end",
      "context": {
        "text": "Next",
        "variant": "secondary",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "secondary with icon at end, small",
      "context": {
        "text": "Next",
        "variant": "secondary",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "secondary with icon at start",
      "context": {
        "text": "Previous",
        "variant": "secondary",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "secondary with icon at start, small",
      "context": {
        "text": "Previous",
        "variant": "secondary",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "warning",
      "context": {
        "text": "Yes, delete this vaccine",
        "variant": "warning"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning\" data-module=\"nhsuk-button\" type=\"submit\">\n  Yes, delete this vaccine\n</button>"
    },
    {
      "name": "warning as a link",
      "context": {
        "text": "Yes, delete this vaccine",
        "variant": "warning",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--warning\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Yes, delete this vaccine\n</a>"
    },
    {
      "name": "warning as a link, small",
      "context": {
        "text": "Yes, delete this vaccine",
        "small": true,
        "variant": "warning",
        "href": "#"
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--warning nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Yes, delete this vaccine\n</a>"
    },
    {
      "name": "warning disabled",
      "context": {
        "text": "Yes, delete this vaccine",
        "variant": "warning",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Yes, delete this vaccine\n</button>"
    },
    {
      "name": "warning disabled, small",
      "context": {
        "text": "Yes, delete this vaccine",
        "variant": "warning",
        "small": true,
        "disabled": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\" disabled aria-disabled=\"true\">\n  Yes, delete this vaccine\n</button>"
    },
    {
      "name": "warning, small",
      "context": {
        "text": "Yes, delete this vaccine",
        "small": true,
        "variant": "warning"
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Yes, delete this vaccine\n</button>"
    },
    {
      "name": "warning with icon at end",
      "context": {
        "text": "Next",
        "variant": "warning",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "warning with icon at end, small",
      "context": {
        "text": "Next",
        "variant": "warning",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "warning with icon at start",
      "context": {
        "text": "Previous",
        "variant": "warning",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "warning with icon at start, small",
      "context": {
        "text": "Previous",
        "variant": "warning",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--warning nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "with double click not prevented",
      "context": {
        "text": "Save and continue",
        "preventDoubleClick": false
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button\" data-module=\"nhsuk-button\" data-prevent-double-click=\"false\" type=\"submit\">\n  Save and continue\n</button>"
    },
    {
      "name": "with double click prevented",
      "context": {
        "text": "Save and continue",
        "preventDoubleClick": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button\" data-module=\"nhsuk-button\" data-prevent-double-click=\"true\" type=\"submit\">\n  Save and continue\n</button>"
    },
    {
      "name": "with icon at end",
      "context": {
        "text": "Next",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "with icon at end, small",
      "context": {
        "text": "Next",
        "icon": {
          "name": "arrow-right",
          "placement": "end"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <span class=\"nhsuk-button__content\">Next</span>\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z\"/>\n  </svg>\n</button>"
    },
    {
      "name": "with icon at start",
      "context": {
        "text": "Previous",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--icon\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "with icon at start, small",
      "context": {
        "text": "Previous",
        "icon": {
          "name": "arrow-left",
          "placement": "start"
        },
        "small": true
      },
      "screenshot": false,
      "options": {},
      "html": "<button class=\"nhsuk-button nhsuk-button--icon nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  <svg class=\"nhsuk-icon nhsuk-icon--arrow-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z\"/>\n  </svg>\n  <span class=\"nhsuk-button__content\">Previous</span>\n</button>"
    },
    {
      "name": "as a link",
      "context": {
        "text": "Link button",
        "href": "#"
      },
      "screenshot": {
        "states": [
          "focus",
          "hover",
          "active"
        ],
        "selector": ".nhsuk-button"
      },
      "options": {},
      "html": "<a class=\"nhsuk-button\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Link button\n</a>"
    },
    {
      "name": "as a link, small",
      "context": {
        "text": "Link button",
        "small": true,
        "href": "#"
      },
      "screenshot": false,
      "options": {},
      "html": "<a class=\"nhsuk-button nhsuk-button--small\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Link button\n</a>"
    }
  ]
}