Button
Button 📸
Code
Markup
<button type="submit" class="govuk-button" data-module="govuk-button">
Save and continue
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
text: "Save and continue"
}) }}
Button disabled
Code
Markup
<button type="submit" disabled aria-disabled="true" class="govuk-button" data-module="govuk-button">
Disabled button
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
text: "Disabled button",
disabled: true
}) }}
Button link
Code
Markup
<a href="/" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
Link button
</a>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
text: "Link button",
href: "/"
}) }}
Button start 📸
Code
Markup
<button type="submit" class="govuk-button govuk-button--start" data-module="govuk-button">
Start now button
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
</svg>
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
text: "Start now button",
isStartButton: true
}) }}
Button input
Code
Markup
<input value="Start now" type="submit" name="start-now" class="govuk-button" data-module="govuk-button">
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
element: "input",
name: "start-now",
text: "Start now"
}) }}
Button secondary
A button for secondary actions
Code
Markup
<button type="submit" name="secondary" class="govuk-button govuk-button--secondary" data-module="govuk-button">
Secondary button
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
name: "secondary",
text: "Secondary button",
classes: "govuk-button--secondary"
}) }}
Button warning
A button for actions that need a warning
Code
Markup
<button type="submit" name="Warning" class="govuk-button govuk-button--warning" data-module="govuk-button">
Warning button
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
name: "Warning",
text: "Warning button",
classes: "govuk-button--warning"
}) }}
Button inverse 📸
A button that appears on dark backgrounds
Code
Markup
<button type="submit" name="Inverse" class="govuk-button govuk-button--inverse" data-module="govuk-button">
Inverse button
</button>
Macro
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukButton({
name: "Inverse",
text: "Inverse button",
classes: "govuk-button--inverse"
}) }}