govuk-frontend/dist/govuk/components/button/fixtures.json

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{
    "component": "button",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "text": "Save and continue"
            },
            "hidden": false,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": true,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Save and continue\n</button>"
        },
        {
            "name": "disabled",
            "options": {
                "text": "Disabled button",
                "disabled": true
            },
            "hidden": false,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" disabled aria-disabled=\"true\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Disabled button\n</button>"
        },
        {
            "name": "link",
            "options": {
                "text": "Link button",
                "href": "/"
            },
            "hidden": false,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Link button\n</a>"
        },
        {
            "name": "start",
            "options": {
                "text": "Start now button",
                "isStartButton": true
            },
            "hidden": false,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": true,
            "html": "<button type=\"submit\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg>\n</button>"
        },
        {
            "name": "secondary",
            "options": {
                "name": "secondary",
                "text": "Secondary button",
                "classes": "govuk-button--secondary"
            },
            "hidden": false,
            "description": "A button for secondary actions",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" name=\"secondary\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n  Secondary button\n</button>"
        },
        {
            "name": "warning",
            "options": {
                "name": "Warning",
                "text": "Warning button",
                "classes": "govuk-button--warning"
            },
            "hidden": false,
            "description": "A button for actions that need a warning",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" name=\"Warning\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n  Warning button\n</button>"
        },
        {
            "name": "inverse",
            "options": {
                "name": "Inverse",
                "text": "Inverse button",
                "classes": "govuk-button--inverse"
            },
            "hidden": false,
            "description": "A button that appears on dark backgrounds",
            "pageTemplateOptions": {
                "bodyClasses": "app-template__body--inverse"
            },
            "screenshot": true,
            "html": "<button type=\"submit\" name=\"Inverse\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n  Inverse button\n</button>"
        },
        {
            "name": "attributes",
            "options": {
                "text": "Submit",
                "attributes": {
                    "aria-controls": "test-target-element",
                    "data-tracking-dimension": 123
                }
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"test-target-element\" data-tracking-dimension=\"123\">\n  Submit\n</button>"
        },
        {
            "name": "link attributes",
            "options": {
                "href": "/",
                "text": "Submit",
                "attributes": {
                    "aria-controls": "test-target-element",
                    "data-tracking-dimension": 123
                }
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"test-target-element\" data-tracking-dimension=\"123\">\n  Submit\n</a>"
        },
        {
            "name": "classes",
            "options": {
                "text": "Submit",
                "classes": "app-button--custom-modifier"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "link classes",
            "options": {
                "href": "/",
                "text": "Submit",
                "classes": "app-button--custom-modifier"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  Submit\n</a>"
        },
        {
            "name": "name",
            "options": {
                "text": "Submit",
                "name": "start-now"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "type",
            "options": {
                "text": "Submit",
                "type": "button"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "explicit link",
            "options": {
                "href": "/",
                "text": "Continue"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Continue\n</a>"
        },
        {
            "name": "value",
            "options": {
                "text": "Submit",
                "value": "start"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "html",
            "options": {
                "text": "Submit",
                "html": "Start <em>now</em>"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Start <em>now</em>\n</button>"
        },
        {
            "name": "no type",
            "options": {
                "text": "Button!"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Button!\n</button>"
        },
        {
            "name": "no data-prevent-double-click",
            "options": {
                "text": "Submit"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "don't prevent double click",
            "options": {
                "text": "Submit",
                "preventDoubleClick": false
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" data-prevent-double-click=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        },
        {
            "name": "id",
            "options": {
                "text": "Submit",
                "id": "submit"
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" id=\"submit\">\n  Submit\n</button>"
        },
        {
            "name": "start link",
            "options": {
                "href": "/",
                "text": "Start now link button",
                "isStartButton": true
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now link button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg>\n</a>"
        },
        {
            "name": "prevent double click",
            "options": {
                "text": "Submit",
                "preventDoubleClick": true
            },
            "hidden": true,
            "description": "",
            "pageTemplateOptions": {},
            "screenshot": false,
            "html": "<button type=\"submit\" data-prevent-double-click=\"true\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
        }
    ]
}