Button – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Button – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Button"> <meta name="description" content="Use the button component to help users carry out an action"> <meta name="og:description" content="Use the button component to help users carry out an action"> <link rel="canonical" href="https://design-system.service.gov.uk/components/button/"> <link href="/stylesheets/main-c4a333404e1796065e06bfef0e1fd954.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p> <p class="govuk-body">We also use essential cookies to remember if you’ve accepted analytics cookies.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> <span class="govuk-header__product-name"> Design System </span> </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/" aria-current="page"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> <span class="govuk-caption-xl"> Components </span> <h1 class="govuk-heading-xl"> Button </h1> <div class="app-prose-scope"> <div class="govuk-inset-text app-wcag-callout"> <strong class="govuk-tag app-wcag-callout__tag"> WCAG 2.2 </strong> <h2> New WCAG 2.2 criteria affect this component </h2> <p class="govuk-body">To use the ‘Button’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria:</p> <ul class="govuk-list"> <li><a class="govuk-link" href="#wcag-interact-button">make sure users can interact with the Button component</a></li> </ul> <p class="govuk-body">See the full list of <a class="govuk-link" href="/accessibility/wcag-2.2/#components-and-patterns-affected-in-the-design-system">components and patterns affected by WCAG 2.2</a>.</p> </div> <div class="app-example-wrapper" id="button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: button</span> </a> </div> <iframe title="Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" loading="eager"></iframe> </div> <span id="options-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-html" role="tab" aria-controls="button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-nunjucks" role="tab" aria-controls="button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#button-example-html" aria-controls="button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Save and continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#button-example-nunjucks" aria-controls="button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Save and continue"</span> }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> <p>Use the button component to help users carry out an action like starting an application or saving their information.</p> <h2 id="how-it-works">How it works</h2> <p>Write button text in sentence case, describing the action it performs. For example:</p> <ul> <li>‘Start now’ at the <a href="/patterns/start-using-a-service/">start of your service</a></li> <li>‘Sign in’ to an account a user has already created</li> <li>‘Continue’ when the service does not save a user’s information</li> <li>‘Save and continue’ when the service does save a user’s information</li> <li>‘Save and come back later’ when a user can save their information and come back later</li> <li>‘Add another’ to add another item to a list or group</li> <li>‘Pay’ to make a payment</li> <li>‘Confirm and send’ on a <a href="/patterns/check-answers/">Check answers page</a> that does not have any legal content a user must agree to</li> <li>‘Accept and send’ on a <a href="/patterns/check-answers/">Check answers page</a> that has legal content a user must agree to</li> <li>‘Sign out’ when a user is signed in to an account</li> </ul> <p>You may need to include more or different words to better describe the action. For example, ‘Add another address’ and ‘Accept and claim a tax refund’.</p> <p>Align the primary action button to the left edge of your form.</p> <div class="app-wcag-note" id="wcag-interact-button" role="note"> <strong class="govuk-tag app-wcag-callout__tag"> WCAG 2.2 </strong> <p>Do not decrease the height or target area of the Button component. This is to make sure users can easily interact with it. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p> </div> <p>There are 2 ways to use the Button component. You can use HTML or, if you are using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the <a href="https://prototype-kit.service.gov.uk">GOV.UK Prototype Kit</a>, you can use the Nunjucks macro.</p> <h3 id="default-buttons">Default buttons</h3> <p>Use a default button for the main call to action on a page.</p> <p>Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.</p> <div class="app-example-wrapper" id="button-second-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: button second</span> </a> </div> <iframe title="Button second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" loading="lazy"></iframe> </div> <span id="options-button-second-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-second-example-html" role="tab" aria-controls="button-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-second-example-nunjucks" role="tab" aria-controls="button-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#button-second-example-html" aria-controls="button-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="button-second-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Save and continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#button-second-example-nunjucks" aria-controls="button-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="button-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-button-second-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-button-second-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Save and continue"</span> }) }}</code></pre> </div> </div> </div> <h3 id="start-buttons">Start buttons</h3> <p>Use a start button for the main call to action on <a href="/patterns/start-using-a-service/">your service’s Start page</a>.<br>Start buttons do not usually submit form data, so use a link tag instead of a button tag.</p> <div class="app-example-wrapper" id="start-now-button-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/start/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: start now button – button</span> </a> </div> <iframe title="Start now button – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/start/index.html" loading="lazy"></iframe> </div> <span id="options-start-now-button-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#start-now-button-button-example-html" role="tab" aria-controls="start-now-button-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#start-now-button-button-example-nunjucks" role="tab" aria-controls="start-now-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#start-now-button-button-example-html" aria-controls="start-now-button-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="start-now-button-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button govuk-button--start"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Start now <span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button__start-icon"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"17.5"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"19"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 33 40"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M0 0h13l20 20-20 20H0l20-20z"</span> /></span> <span class="hljs-tag"></<span class="hljs-name">svg</span>></span> <span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#start-now-button-button-example-nunjucks" aria-controls="start-now-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="start-now-button-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-start-now-button-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-start-now-button-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Start now"</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">"#"</span>, <span class="hljs-attr">isStartButton</span>: <span class="hljs-literal">true</span> }) }}</code></pre> </div> </div> </div> <h3 id="secondary-buttons">Secondary buttons</h3> <p>Use secondary buttons for secondary calls to action on a page.</p> <p>Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.</p> <div class="app-example-wrapper" id="secondary-button-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/secondary/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: secondary button – button</span> </a> </div> <iframe title="Secondary button – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/secondary/index.html" loading="lazy"></iframe> </div> <span id="options-secondary-button-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-button-example-html" role="tab" aria-controls="secondary-button-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-button-example-nunjucks" role="tab" aria-controls="secondary-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#secondary-button-button-example-html" aria-controls="secondary-button-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="secondary-button-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button govuk-button--secondary"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Find address <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#secondary-button-button-example-nunjucks" aria-controls="secondary-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="secondary-button-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-secondary-button-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-secondary-button-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Find address"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-button--secondary"</span> }) }}</code></pre> </div> </div> </div> <p>You can also <a href="#grouping-buttons">group default and secondary buttons together</a>.</p> <h3 id="warning-buttons">Warning buttons</h3> <p>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.</p> <div class="app-example-wrapper" id="warning-button-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/warning/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: warning button – button</span> </a> </div> <iframe title="Warning button – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/warning/index.html" loading="lazy"></iframe> </div> <span id="options-warning-button-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-button-button-example-html" role="tab" aria-controls="warning-button-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-button-button-example-nunjucks" role="tab" aria-controls="warning-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#warning-button-button-example-html" aria-controls="warning-button-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="warning-button-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button govuk-button--warning"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Delete account <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#warning-button-button-example-nunjucks" aria-controls="warning-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="warning-button-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-warning-button-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-warning-button-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Delete account"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-button--warning"</span> }) }}</code></pre> </div> </div> </div> <p>Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.</p> <p>When letting users carry out an action like this, it’s a good idea to include an additional step which asks them to confirm it.</p> <p>In this instance, use another style of button for the initial call to action, and a warning button for the final confirmation.</p> <p>Do not only rely on the red colour of a warning button to communicate the serious nature of the action. This is because not all users will be able to see the colour or will understand what it signifies. Make sure the context and button text make clear what will happen if the user selects it.</p> <h3 id="buttons-on-dark-backgrounds">Buttons on dark backgrounds</h3> <p>Use the <code>govuk-button--inverse</code> modifier class to show white buttons on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.</p> <p>Make sure all users can see the button – the white button and background colour must have a contrast ratio of at least 4.5:1 to meet <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA</a>.</p> <div class="app-example-wrapper" id="inverse-button-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/inverse/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: inverse button – button</span> </a> </div> <iframe title="Inverse button – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/inverse/index.html" loading="lazy"></iframe> </div> <span id="options-inverse-button-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inverse-button-button-example-html" role="tab" aria-controls="inverse-button-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inverse-button-button-example-nunjucks" role="tab" aria-controls="inverse-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#inverse-button-button-example-html" aria-controls="inverse-button-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="inverse-button-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button govuk-button--inverse"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Create an account <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#inverse-button-button-example-nunjucks" aria-controls="inverse-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="inverse-button-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-inverse-button-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-inverse-button-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Create an account"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-button--inverse"</span> }) }}</code></pre> </div> </div> </div> <h3 id="disabled-buttons">Disabled buttons</h3> <p>Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.</p> <p>Only use disabled buttons if research shows it makes the user interface easier to understand.</p> <div class="app-example-wrapper" id="disabled-button-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/disabled/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: disabled button – button</span> </a> </div> <iframe title="Disabled button – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/disabled/index.html" loading="lazy"></iframe> </div> <span id="options-disabled-button-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#disabled-button-button-example-html" role="tab" aria-controls="disabled-button-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#disabled-button-button-example-nunjucks" role="tab" aria-controls="disabled-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#disabled-button-button-example-html" aria-controls="disabled-button-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="disabled-button-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Disabled button <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#disabled-button-button-example-nunjucks" aria-controls="disabled-button-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="disabled-button-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-disabled-button-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-disabled-button-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Disabled button"</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> }) }}</code></pre> </div> </div> </div> <h3 id="grouping-buttons">Grouping buttons</h3> <p>Use a button group when two or more buttons are placed together.</p> <div class="app-example-wrapper" id="button-group-with-mixed-button-types-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/secondary-combo/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: button group with mixed button types – button</span> </a> </div> <iframe title="Button group with mixed button types – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/secondary-combo/index.html" loading="lazy"></iframe> </div> <span id="options-button-group-with-mixed-button-types-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-with-mixed-button-types-button-example-html" role="tab" aria-controls="button-group-with-mixed-button-types-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-with-mixed-button-types-button-example-nunjucks" role="tab" aria-controls="button-group-with-mixed-button-types-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#button-group-with-mixed-button-types-button-example-html" aria-controls="button-group-with-mixed-button-types-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="button-group-with-mixed-button-types-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Save and continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button govuk-button--secondary"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Save as draft <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#button-group-with-mixed-button-types-button-example-nunjucks" aria-controls="button-group-with-mixed-button-types-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="button-group-with-mixed-button-types-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-button-group-with-mixed-button-types-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-button-group-with-mixed-button-types-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-button-group"</span>> {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Save and continue"</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Save as draft"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-button--secondary"</span> }) }} </div></code></pre> </div> </div> </div> <p>Any links within a button group will automatically align with the buttons.</p> <div class="app-example-wrapper" id="button-group-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/button-group/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: button group – button</span> </a> </div> <iframe title="Button group – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/button-group/index.html" loading="lazy"></iframe> </div> <span id="options-button-group-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-button-example-html" role="tab" aria-controls="button-group-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-button-example-nunjucks" role="tab" aria-controls="button-group-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#button-group-button-example-html" aria-controls="button-group-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="button-group-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#button-group-button-example-nunjucks" aria-controls="button-group-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="button-group-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-button-group-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-button-group-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-button-group"</span>> {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Continue"</span> }) }} <a <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-link"</span> href=<span class="hljs-string">"#"</span>><span class="hljs-title class_">Cancel</span></a> </div></code></pre> </div> </div> </div> <h3 id="stop-users-from-accidentally-sending-information-more-than-once">Stop users from accidentally sending information more than once</h3> <p>Sometimes, users double click buttons because they:</p> <ul> <li>have used operating systems where they have to double click items to make them work</li> <li>are experiencing a slow connection which means they are not given feedback on their action quickly enough</li> <li>have motor impairments such as hand tremors which cause them to click the button involuntarily</li> </ul> <p>In some cases, this can mean their information is sent twice.</p> <p>For example, the GOV.UK Notify team discovered that a number of users were receiving invitations twice, because the person sending them was double clicking the ‘send’ button.</p> <p>If you are working in production and research shows that users are frequently sending information twice, you can configure the button to ignore the second click.</p> <p>To do this, set the <code>data-prevent-double-click</code> attribute to <code>true</code>. You can do this directly in the HTML or, if you’re using Nunjucks, you can use the Nunjucks macro as shown in this example.</p> <div class="app-example-wrapper" id="button-with-prevent-double-click-button-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/button/prevent-double-click/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: button with prevent double click – button</span> </a> </div> <iframe title="Button with prevent double click – Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/prevent-double-click/index.html" loading="lazy"></iframe> </div> <span id="options-button-with-prevent-double-click-button-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-with-prevent-double-click-button-example-html" role="tab" aria-controls="button-with-prevent-double-click-button-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-with-prevent-double-click-button-example-nunjucks" role="tab" aria-controls="button-with-prevent-double-click-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#button-with-prevent-double-click-button-example-html" aria-controls="button-with-prevent-double-click-button-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="button-with-prevent-double-click-button-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">data-prevent-double-click</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Confirm and send <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#button-with-prevent-double-click-button-example-nunjucks" aria-controls="button-with-prevent-double-click-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="button-with-prevent-double-click-button-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-button-with-prevent-double-click-button-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-button-with-prevent-double-click-button-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">element</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> HTML element for the button component – <code>input</code>, <code>button</code> or <code>a</code>. In most cases you will not need to set this as it will be configured automatically if <code>href</code> is provided. This parameter will be removed in the next major version. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text for the <code>input</code>, <code>button</code> or <code>a</code> element. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML for the <code>button</code> or <code>a</code> element only. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>"button"</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>"input"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type for the <code>input</code> or <code>button</code> element – <code>"button"</code>, <code>"submit"</code> or <code>"reset"</code>. Defaults to <code>"submit"</code>. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Value for the <code>button</code> element only. This has no effect on <code>a</code> or <code>input</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the button component should be disabled. For <code>input</code> and <code>button</code> elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically. This has no effect on <code>a</code> elements. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The URL that the button component should link to. If this is set, <code>element</code> will be automatically set to <code>"a"</code> if it has not already been defined. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the button component. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">prevent<wbr>Double<wbr>Click</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Prevent accidental double clicks on submit buttons from submitting forms multiple times. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Start<wbr>Button</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Use for the main call to action on your service’s start page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The ID of the button. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Confirm and send"</span>, <span class="hljs-attr">preventDoubleClick</span>: <span class="hljs-literal">true</span> }) }}</code></pre> </div> </div> </div> <p>This feature will prevent double clicks for users that have JavaScript enabled, however you should also think about the issue server-side to protect against attacks.</p> <p>In the case of slow connections, aim to give the user information about what’s happening, for example, by showing a loading spinner or a modal, before using <code>data-prevent-double-click</code>.</p> <h2 id="research-on-this-component">Research on this component</h2> <p>Testing on GOV.UK has shown that <a href="https://github.com/alphagov/govuk-design-system-backlog/issues/34#issuecomment-699537400">the green colour of start buttons has improved click-through rates</a>.</p> </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> <p class="govuk-body"> To help make sure that this page is useful, relevant and up to date, you can: </p> <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/34"> ‘Button’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/button/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> <p class="govuk-body app-contact-panel__body"> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </p> </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> <span class="govuk-footer__licence-description"> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </span> </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-f59bf1e64302757cb67086172d7d4999.js"></script> </body> </html>

CINXE.COM

Button – GOV.UK Design System