<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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
‘Sign in’ to an account a user has already created
‘Continue’ when the service does not save a user’s information
‘Save and continue’ when the service does save a user’s information
‘Save and come back later’ when a user can save their information and come back later
‘Add another’ to add another item to a list or group
‘Pay’ to make a payment
‘Confirm and send’ on a check answers page that does not have any legal content a user must agree to
‘Accept and send’ on a check answers page that has legal content a user must agree to
‘Sign out’ when a user is signed in to an account
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’.
Align the primary action button to the left edge of your form.
There are 2 ways to use the button component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
Default buttons
Use a default button for the main call to action on a page.
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>
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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
Use a start button for the main call to action on your service’s start page.
Start buttons do not usually submit form data, so use a link tag instead of a button tag.
<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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
Use secondary buttons for secondary calls to action on a page.
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>
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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
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>
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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.
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.
In this instance, use another style of button for the initial call to action, and a warning button for the final confirmation.
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.
Disabled buttons
Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
Only use disabled buttons if research shows it makes the user interface easier to understand.
<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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
<buttonclass="govuk-button"data-module="govuk-button">
Save and continue
</button><buttonclass="govuk-button govuk-button--secondary"data-module="govuk-button">
Save as draft
</button></div>
<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-combo-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
<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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
Stop users from accidentally sending information more than once
Sometimes, users double click buttons because they:
have used operating systems where they have to double click items to make them work
are experiencing a slow connection which means they are not given feedback on their action quickly enough
have motor impairments such as hand tremors which cause them to click the button involuntarily
In some cases, this can mean their information is sent twice.
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.
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.
To do this, set the data-prevent-double-click attribute to true. 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>
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-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 ">
Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
</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 button or link. 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">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 button or link. 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 of <code>input</code> or <code>button</code> – <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> tag. 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 should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
</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 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">preventDoubleClick</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">isStartButton</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>
</tbody>
</table>
{{ govukButton({
text: "Confirm and send",
preventDoubleClick: true
}) }}
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.
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 data-prevent-double-click.