Prototyping
This guide explains how to create prototypes using the GOV.UK Design System and GOV.UK Prototype Kit.
Before you start
To make prototypes you will need to install version 7 or later of the GOV.UK Prototype Kit which has been built to work with the Design System.
Version 7 of the Prototype Kit works in the same way as previous versions except that it uses a new frontend framework called GOV.UK Frontend.
This means that any code that you copy across from old prototypes will not display correctly. Instead, you should use the code provided in the Design System.
Styling page elements
The Design System provides lots of new CSS classes for styling page elements, so you should not need to write as much of your own Sass or CSS.
Explore the Styles section of the Design System to see what classes are available and how to apply them.
Using components
Components are reusable parts of the user interface, like buttons, text inputs and checkboxes. The components in the Design System are designed to be accessible and responsive.
There are 2 ways to use components in the Design System. You can either use HTML or a Nunjucks macro.
You can copy the code from the HTML or Nunjucks tabs below any examples:
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/button/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">button</span>
example in a new tab
</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" frameBorder="0" loading="lazy"></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">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">button</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 </button>
<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" data-module="govuk-details" id="options-button-example-details">
<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>
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %}
{{ govukButton({ text: "Save and continue" }) }}