Skip to main content

Button examples

  • # default

    Open this example in a new tab: button 
    {
  "text": "Save and continue"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Save and continue"
}) }}

  • # disabled

    Open this example in a new tab: button 
    {
  "text": "Disabled button",
  "disabled": true
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Disabled button",
  "disabled": true
}) }}
  • Open this example in a new tab: button
    Link button 
    {
  "text": "Link button",
  "href": "/"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Link button",
  "href": "/"
}) }}

  • # start

    Open this example in a new tab: button 
    {
  "text": "Start now button",
  "isStartButton": true
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

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

  • # input

    Open this example in a new tab: button 
    {
  "element": "input",
  "name": "start-now",
  "text": "Start now"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "input",
  "name": "start-now",
  "text": "Start now"
}) }}

  • # secondary

    Open this example in a new tab: button 
    {
  "name": "secondary",
  "text": "Secondary button",
  "classes": "govuk-button--secondary"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button",
  "classes": "govuk-button--secondary"
}) }}

  • # warning

    Open this example in a new tab: button 
    {
  "name": "Warning",
  "text": "Warning button",
  "classes": "govuk-button--warning"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "Warning",
  "text": "Warning button",
  "classes": "govuk-button--warning"
}) }}

  • # inverse

    Open this example in a new tab: button 
    {
  "name": "Inverse",
  "text": "Inverse button",
  "classes": "govuk-button--inverse"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "Inverse",
  "text": "Inverse button",
  "classes": "govuk-button--inverse"
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "element": "button",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "button",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}) }}

  • # link attributes

    Open this example in a new tab: button
    Submit 
    {
  "element": "a",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "a",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}) }}

  • # input attributes

    Open this example in a new tab: button 
    {
  "element": "input",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "input",
  "text": "Submit",
  "attributes": {
    "aria-controls": "test-target-element",
    "data-tracking-dimension": 123
  }
}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "button",
  "classes": "app-button--custom-modifier"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "button",
  "classes": "app-button--custom-modifier"
}) }}

  • # link classes

    Open this example in a new tab: button
    Submit 
    {
  "text": "Submit",
  "element": "a",
  "classes": "app-button--custom-modifier"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "a",
  "classes": "app-button--custom-modifier"
}) }}

  • # input classes

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "input",
  "classes": "app-button--custom-modifier"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "input",
  "classes": "app-button--custom-modifier"
}) }}

  • # name

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "button",
  "name": "start-now"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "button",
  "name": "start-now"
}) }}

  • # type

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "button",
  "type": "button"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "button",
  "type": "button"
}) }}

  • # input type

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "input",
  "type": "button"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "input",
  "type": "button"
}) }}
  • Open this example in a new tab: button
    Continue 
    {
  "element": "a",
  "href": "/",
  "text": "Continue"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "a",
  "href": "/",
  "text": "Continue"
}) }}

  • # no href

    Open this example in a new tab: button
    Submit 
    {
  "text": "Submit",
  "element": "a"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "a"
}) }}

  • # value

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "button",
  "value": "start"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "button",
  "value": "start"
}) }}

  • # html

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "button",
  "html": "Start <em>now</em>"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "button",
  "html": "Start <em>now</em>"
}) }}

  • # no type

    Open this example in a new tab: button 
    {
  "text": "Button!"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Button!"
}) }}

  • # no data-prevent-double-click

    Open this example in a new tab: button 
    {
  "text": "Submit"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit"
}) }}

  • # don't prevent double click

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "preventDoubleClick": false
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "preventDoubleClick": false
}) }}

  • # id

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "element": "input",
  "id": "submit"
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "element": "input",
  "id": "submit"
}) }}
  • Open this example in a new tab: button
    Start now link button 
    {
  "text": "Start now link button",
  "href": "/",
  "isStartButton": true
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Start now link button",
  "href": "/",
  "isStartButton": true
}) }}

  • # input disabled

    Open this example in a new tab: button 
    {
  "element": "input",
  "text": "Explicit input button disabled",
  "disabled": true
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "input",
  "text": "Explicit input button disabled",
  "disabled": true
}) }}

  • # prevent double click

    Open this example in a new tab: button 
    {
  "text": "Submit",
  "preventDoubleClick": true
}
    
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "preventDoubleClick": true
}) }}