GOVUK Buttons

An example of the govuk button component.

Open example in new window
HTML 







<button class="govuk-button" data-module="govuk-button" data-test="this is a value">
  Save and continue
</button>













<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
  Start now
<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></a>












<button class="govuk-button govuk-button--secondary" data-module="govuk-button">
  Find address
</button>
Jinja 
{% from "govuk_frontend_jinja/components/button/macro.html" import govukButton -%}
{{ govukButton({
    "text": "Save and continue",
    "attributes": {
      "data-test": "this is a value"
      }
}) }}

{{ govukButton({
    "text": "Start now",
    "href": "#",
    "isStartButton": true
}) }}

{{ govukButton({
    "text": "Find address",
    "classes": "govuk-button--secondary"
}) }}